Javascript Array_01

배열

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 자바스크립트에서는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 배열이 가지고 있는 값은 요소라 부른다. 자바스크립트에서는 원시값, 객체, 함수, 배열 등 자바스크립트에서 값으로 인정한는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 가진다.

    const arr = ['apple', 'banana', 'orange'];

    console.log(arr[0]);    // apple
    console.log(arr[1]);    // banana
    console.log(arr[2]);    // orange

또한 배열은 요소의 개수를 나타내는 length 프로퍼티를 갖는다. 자바스크립트에는 배열이라는 타입이 존재하지 않는다. 배열은 객체 타입이다.

    console.log(arr.length);    // 3

배열을 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있다. 배열의 생성자 함수는 Array이며, 배열의 프로토타입 객체는 Array.prototype이다.

배열과 일반객체의 차이는 아래와 같다.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

값의 순서와 length 프로퍼티는 일반객체와 배열의 가장 큰 차이이다. 두 특성으로 인해 배열은 반복문에 적합한 자료구조를 가진다.

자바스크립트에서의 배열

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 연속적으로 나열된 자료구조를 말한다. 배열은 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이런 배열을 밀집 배열 이라 한다.

일반적인 의미의 배열은 각 요소가 동일한 크기를 가지고, 연속적으로 이어져 있어 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근할 수 있다. 이는 매우 효율적이고 고속으로 동작할 수 있는 구조이다.

이러한 밀집 배열은 특정 요소를 검색하는 경우 배열의 모든 요소를 처음부터 특정 요소를 발견할 때까지 차례대로 검색해야 하며, 요소를 삽입하거나 삭제할 경우 요소들을 이동시켜야하는 단점이 있다.

자바스크립트의 배열은 일반적인 배열과 다르다. 메모리 공간은 동일한 크길를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 이러한 배열을 희소 배열 이라 한다.

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다. 자바스크립트 배열은 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로퍼티를 갖는 특수한 객체다.

자바스크립트에서 사용할 수 있는 모든 값은 객체 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 된다.

length 프로퍼티와 희소 배열

length 프로퍼티는 요소의 개수를 나타낸다. length 프로퍼티는 빈 배열의 경우 0이며, 빈 배열이 아닌 경우 가장 큰 인덱스에 1을 더한 것과 같다.

length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.

    const arr = [1, 2, 3];
    console.log(arr.length);    // 3

    arr.push(4);
    console.log(arr);           // [1, 2, 3, 4]
    console.log(arr.length);    // 4

    arr.pop();
    console.log(arr);           // [1, 2, 3]
    console.log(arr.length);    // 3

length 프로퍼티는 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수 있다. 현재 length 프로퍼티 값보다 작은 숫자를 할당하면 배열의 길이가 줄어든다.

length 프로퍼티 값보다 큰 숫자를 할당할 경우 length 값은 변경되지만 실제로 배열의 길이가 늘어나지 않는다. 자바스크립트에서는 이 경우 값이 비어 있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도 않는다.

    const arr_1 = [1, 2, 3, 4, 5];

    // 배열의 길이가 5에서 3으로 줄어들고 넘치는 값은 삭제된다.
    arr_1.length = 3;
    console.log(arr_1);         // [1, 2, 3]

    const arr_2 = [1];

    // length 프로퍼티 값은 3이 되지만 실제로 배열의 길이가 늘어나진 않는다.
    // 비어있음 x 2 는 실제로 추가된 배열의 요소가 아니다.
    arr_2.length = 3;
    console.log(arr_2.length);  // 3
    console.log(arr_2);         // [1, 비어있음 x 2]

이처럼 배열의 요소가 연속되지 않고 일부가 비어있는 배열을 희소 배열 이라 한다. 자바스크립트는 희소 배열을 문법적으로 허용한다. 하지만 희소 배열은 사용하지 않는 것이 좋다. 희소 배열은 배열의 기본 개념에 맞지 않다.

배열을 생성할 때 희소 배열을 생성하지 않도록 하자. 배열은 동일한 타입의 요소를 연속적으로 위치시키는 것이 가장 좋다.