10. 배열

  배열

배열은 여러 개의 데이터를 하나의 변수에 담는 것이다.

JavaScirpt의 배열은 타입에 상관없이 값을 넣을 수 있다.

 

1. 선언 방법

• var arrNum = [];
• var arrString = new Array();

선언한 배열 자체의 Type은 Object이다.

 

2. 값 넣는 방법

• arrNum = [1, 2, 3, 4, 5] => Number Type 값 넣기
• arrString = ["A", "B", "C", "D", "E"] => String Type 값 넣기

3. 배열값 확인 방법

• console.log(arrNum); => 1 2 3 4 5 => 배열에 넣어진 값이 모두 출력됨.
• console.log(arrNum[3]); => 4 => 대괄호 안에 넣은 인덱스에 해당하는 값만 출력됨.

4. 배열 크기 확인 방법

    console.log("arrNum배열의 크기 : " + arrNum.length);

  인덱스

배열의 각 저장공간을 우리는 '인덱스'라고 표현한다. 배열값 확인 방법 중 arrNum[3]이 바로 '배열이름[인덱스]'의 형식으로 배열 요소에 접근한 방법이다.

인덱스는 배열의 요소마다 붙여진 일련의 번호로 구별을 위해 사용한다. 0부터 시작한다는 점이 가장 중요한 포인트!

 

배열을 다음과 같이 선언했다고 생각해보자.

 

var arrList = ["삼", "색", "이", "러", "버"];

 

위 배열의 인덱스가 2인 요소는 바로 세 번째에 있는 "이"이다. 0부터 시작하기 때문이다.

 

가장 마지막인 "버" 요소는 그렇다면 몇 인덱스일까?

바로 4이다. 이처럼 배열의 인덱스는 모두 0부터 시작하기 때문에 끝은 개수의 -1이라고 생각해주면 좋다.

 

배열의 인덱스는 0부터 시작한다는 점을 잊지 말자.

  예제

<script>
    // button을 이용해 h1 color 변경하기
    var elem = document.getElementById("elem");
    var btn = document.getElementById("btn");

    // 배열을 사용해서 7가지 색상을 배열에 넣기
    var fColor = ["red", "orange", "yellow", "green", 
                  "blue", "navy", "purple"];

    var i = -1;

    btn.addEventListener("click", function(){
        setInterval(function(){
            i++;

        // 만약에 i가 fColor배열의 크기만큼 증가했을때
        if(i==fColor.length){
            i = 0;  // i값을 0으로 설정한다.
        }

        elem.style.color = fColor[i];
        },500);
    });
</script>