자바스크립트의 배열(Array) 기초

배열(Array)

배열은 자바스크립트 객체의 특별한 형태입니다. 즉, C나 자바의 배열과 같은 기능을 하는 객체이지만, 이들과는 다르게 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어떤 타입의 데이터를 저장하더라도 에러가 발생하지 않습니다.

자바스크립트 배열은 어떤 타입이던지간에 그 타입의 데이터를 연속된 공간에 저장하는 자료구조입니다. 그리고 각 데이터 저장 위치는 인덱스를 부여해서 접근할 수 있습니다.

배열 리터럴

배열을 사용하기 위해서는 Array() 를 이용하는 방법도 있지만 포스팅에서는 자주 이용되는 배열리터럴에 대해 알아보겠습니다.

배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법입니다. 객체 리터럴이 중괄호( {} )를 이용한 표기법이었다면, 배열 리터럴은 대괄호( [] )를 사용합니다.

배열 리터럴을 통한 배열 생성 및 접근 방법

javascript

var colorArr = ['red', 'orange', 'yellow', 'green'];
console.log(colorArr[0]);
console.log(colorArr[1]);
console.log(colorArr[2]);
console.log(colorArr[3]);

// 배열 접근 방법 : 배열변수[인덱스]

배열은 배열내의 항목에 접근하기 위해서는 항목마다 인덱스가 부여되어 있기 때문에 인덱스(0,1,2,3....)를 통해 접근가능하며 인덱스는 0부터 시작합니다. 그리고 마지막 배열의 인덱스는 배열의 항목수 - 1 이 됩니다. 위의 코드에서 항목수가 4개이므로 4 - 1 를 하면 마지막 인덱스는 3입니다. 이는 배열 인덱스는 0부터 시작하기 때문입니다. 

그리고 앞 코드처럼 대괄호 내에 접근하고자 하는 원소에 배열 항목내의 위치 인덱스값을 넣어서 접근합니다. 또한 앞서 말한 배열의 항목은 일반적으로 항목이라고 하지 않고 원소라고 합니다.

배열의 필요성

배열을 사용하는 이유 중에는

중복된 변수 선언을 줄이기 위해 사용

반복문을 이용해서 요소들을 쉽게 처리하기 위해 사용

코드 절감 효과

예를 들어, 학생들의 전체 평균을 구하는 로직이 필요하다고 가정해보겠습니다.

다음은 배열을 사용하지 않았을때 코드입니다.

javascript

var score1 = 50,
    score2 = 90,
    score3 = 30,
    score4 = 70;

var sum = 0;
sum = score1;
sum += score2;
sum += score3;
sum += score4;

console.log(sum);

다음은 배열과 반복문을 이용하여 처리한 코드입니다.

javascript

var score = [50,90,30,70],
    sum = 0;

for (var i = 0; i < score.length; i++) {
    sum += score[i];
}
console.log(sum);

자바스크립트의 모든 배열에는 length 프로퍼티가 있으며 length 프로퍼티는 배열의 원소 개수를 나타냅니다.

(실제로 배열에 존재하는 원소 개수와 일치하는 것은 아닙니다... 좀 더 자세한 내용은 다음 기회에...)

score.length 값은 4 라는 것을 확인할 수 있습니다. 즉, length 프로퍼티는 배열 내의 가장 큰 인덱스에 1을 더한 값입니다.

위의 코드에 배열의 가장 큰 인덱스는 3이므로 3+1 로 length 프로퍼티는 4가 되는 것입니다. 반대로 얘기하자면 length 프로퍼티에서 1을 빼게 되면 배열의 마지막 인덱스가 되는 것입니다. 앞서 배열 리터털에 설명했던 내용과 같습니다.

다차원 배열

2차원 배열이상을 다차원 배열이라 합니다.

2차원 배열은 수학의 행렬과 같은 자료 구조로 이루어져 있습니다.

프로그래밍에서의 배열은 1차원 배열을 이용해서 2차원 배열을 구현합니다.

다음의 코드를 통해 알아보겠습니다.

javascript

var arr1 = [1,true,'javaScript']; // 1차원 배열

var arr2 = [1, [true, false], [['자바스크립트','스터디'], {prop: '다차원 배열'}]]; // 2차원 배열(다차원 배열)

console.log(arr2[0]); // 1 출력
console.log(arr2[1][0]); // 1번째 배열 인덱스에 있는 0번째 인덱스에 접근 : true 출력
console.log(arr2[1][1]); // 1번째 배열 인덱스에 있는 1번째 인덱스에 접근 : false 출력
console.log(arr2[2][0][0]); // 2번째 배열 인덱스에 있는 0번째 배열의 0번째 인덱스에 접근 : 자바스크립트 출력
console.log(arr2[2][1]); // 2번째 배열 인덱스에 있는 1번째 배열인덱스에 접근 : Object {prop: "다차원 배열"} 출력
console.log(arr2[2][1].prop); // 다차원 배열 출력

@ 다차원 배열을 반복문을 이용하여 원소를 출력해보겠습니다.

javascript

var arr = [[1,2], [true, false], ['자바스크립트','스터디']];

for (var j = 0; j < arr.length; j++) {
    for (var k = 0; k < arr[j].length; k++) {
        console.log('arr2[' + j + ']' + '[' + k + '] = ' + arr[j][k] );
    }
}

Jaehee's WebClub