[javascript 언어공부] 배열(2)

이번에는 배열을 사용하는 좀 더 구체적인 방법에 대해서 살펴보자.

배열에 대해 어떤 값을 가져올 때,  index값을 기억하고 있는 것은 불가능하다.

따라서 배열이라는 것은, 배열에 담겨 있는 값들을 하나하나 꺼내서, 꺼내진 값들을 가공하는 것이 배열을 사용하는 것의 핵심이다.

'하나하나 꺼내온다'는 것은 앞서 배운 것 중 '반복문'과 연관된다. 

배열은 반복문과 함께 사용했을 때 비로소 그 가치가 발휘된다.

하단의 코드를 보자. 

function get_members(){

    return ['estelar', 'yesri', 'hongjoo'];

}

var members = get_members();

get_members()라는 함수를 정의하고, 그 함수를 호출한 결과를 members 라는 변수에 담는다.

과연 이 닉네임들을 화면에 대문자로 출력하고 싶으면 어떻게 할까? 

먼저, 대문자로 바꾸는 방법에 대해서 살펴보자.

콘솔에서

var a = 'estelar' 라고 지정 후 

a.toUppercase(); 라고 해서

toUppercase()라는 함수를 호출하면

'ESTELAR'가  출력된다. 

즉 소문자를 대문자로 바꾸는 것이 toUpperCase()라는 함수가 하는 일이다.

toUpperCase()는 자바스크립트가 기본적으로 제공하는 내장함수이며, 

function을 직접 작성해서 사용하는 것은 사용자 정의 함수라 한다.

다시 get_members()라는 함수로 돌아가보자.

여기서 retrun값의 첫번째 요소를 출력하려면

document.write(members[0]) 이라 출력하면 될 것이고, 

이는 'estelar'를 출력한다. 이를 대문자로 바꾸려려면 toUpperCase라는 함수를 활용한다.

document.write(members[0].toUpperCase();) 

이를 실행할 경우 'ESTELAR'로 출력된다.

3개를 모두 출력할 경우 

document.write(members[0].toUpperCase()+'<br />') ;

document.write(members[1].toUpperCase()+'<br />') ;

document.write(members[2].toUpperCase()+'<br />') ;

라고 출력하면 된다.

그런데, 나중에 get_members() 리턴 값에 4번째 값이 추가되게 되면 어떻게 될까? 

function get_members(){

    return ['estelar', 'yesri', 'hongjoo','meja',];

}

'meja'는 출력되지 않을 것이다. 또 만약 기존의 값을 없앤다면, 

function get_members(){

    return ['estelar', 'yesri'];

}

3번째 인자가 없기 떄문에 

document.write(members[2].toUpperCase();)  앞의 호출에서 오류가 난다. 

이러한 문제가 있기 떄문에 우리가 직접 코드를 작성하는 것은 한계가 있다.

이 때 사용하는 것이 바로 배열과 반복문을 결합하는 것이다.

어떻게 반복문과 배열을 결합할까?

var a = ['estelar','yesri','hongjoo']; 라고 정의하고

alert(a.lengthj); 라고 쓴 후 출력하면 3이 나온다.

3이라는 숫자는, a라고 하는 배열에 담겨있는 값이 몇개인가 라는 것을 나타낸다.

값이 3개니까 3이 되는 것이다.

만약에 a라는 배열에 한가지를 더 추가하면 

var a = ['estelar','yesri','hongjoo','meja'];

 alert(a.lengthj) 는 4가 된다. 

즉 어떤 배열에다가 .length라는 명령을 하면, 그 배열에 있는 값이, 원소가 몇개인지 알려주는

미리 준비되어 있는 명령이 바로 length이다. 

이러한 조각조각의 지식을 결합해서, 배열과 반복문을 결합한 하나의 완제품을 완성해보자.

다시 get_members() 함수를 반복문을 이용해서 호출해보자.

function get_members(){

    return ['estelar', 'yesri', 'hongjoo'];

}

이를 반복문으로 호출하면 

for(var i=0;i<3;i++){

 document.write(members[0].toUpperCase()+'<br />') ;

}

여기서 members[0]이 고정값인데 이를  i로 바꿔주면 

for(var i=0;i<3;i++){

 document.write(members[i].toUpperCase()+'<br />') ;

}

브라우저에는 

estelar

yesri

hongjoo

가 찍힌다.

하지만 아직 get_members()의 리턴값에 원소를 하나 추가하면 그 부분이 나타나지 않는다.

따라서 함수에서 원소의 갯수를 조건지어주는 i<3 부분에 3을 

우리가 처리하고자 하는 배열의 원소의 갯수로 바꿔줄 수 있으면 

이 반복문이 호출되는 반복 횟수는 원소의 갯수에 따라 가변적으로 바뀔 수 있게 된다. 

그렇다면 배열이 가지고있는 원소의 갯수는 ? .length를 통해 가져올 수 있다. 따라서 

3이라는 숫자가 있는 부분에 member.length로 바꾸면 

원소의 갯수에 따라 가변적으로 가져올 수 있다는 것이다. 

for(var i=0;i<member.lgnth;i++){

 document.write(members[0].toUpperCase()+'<br />') ;

}

따라서 get_members() 리턴값이 아무리 많아져도, 아무리 적어져도 

반복문은 원소의 갯수에 따라 실행된다.