자바스크립트 배열은 사실 객체다!

typeof 배열 === 객체?

typeof 를 통해 배열의 타입을 콘솔에 찍어보면 object라고 나온다. 자바스크립트에 배열이라는 타입은 따로 존재하지 않는다. 배열은 사실은 객체 타입이다. 그렇지만 일반 객체와는 구별되는 특징이 있다.

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

가장 명확한 차이점은 "값의 순서"와 "length 프로퍼티"가 있다는 것이다. 그렇기 때문에 다음과 같은 장점을 지닌다. 그렇기 때문에 처음/마지막/특정 위치부터 순차적으로 요소에 접근할 수가 있다.

두 가지 종류의 배열

배열에는 두 가지 종류가 있다.

• 밀집 배열(dense array)
  • 자료구조에서 일반적으로 말하는, 배열의 동일한 크기의 메모리 공간이 연속적으로 나열된 자료구조를 말한다.
  • 빈틈없이 연속적으로 이어져 있으므로, 인덱스를 통해 단 한 번의 연산으로 임의의 요소에 접근 : O(1)
    • 인덱스가 0인 요소의 메모리 주소: 1000(시작위치) + 0 * 8 = 1000
    • 인덱스가 1인 요소의 메모리 주소: 1000 + 1 * 8 = 1000
      • 정렬되어 있을 경우 위처럼 인덱스를 통해 메모리 주소를 계산할 수 있으니 탐색에 걸리는 시간이 O(1)만 정렬이 되어 있지 않을 경우 배열의 모든 요소를 처음부터 특정 요소를 발견할 때까지 차례대로 검색하는 선형 검색을 해야하므로, 시간 복잡도는 O(n)이다.
      • 배열의 중간에 삽입, 삭제를 하는 경우 배열의 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 하는 단점이 있다.

• 희소 배열(sparse array)
  • 배열 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않는다.
  • 연속적으로 이어져 있지 않을 수도 있다.

자바스크립트는 밀집 배열이 아닌 희소 배열로, 엄밀히 말해 일반적인 배열이 아니며, 일반적인 배열의 동작을 흉내 낸 특수한 객체다

 

getOwnPropertyDescriptors를 통해 배열을 찍어보니, 0, 1, 2라는 인덱스가 찍히고, length라는 프로퍼티를 가지고 있는 것을 볼 수 있다. 자바스크립트 배열의 요소는 사실 프로퍼티 값 이었던 것이다!

자바스크립트에서 모든 값은 객체의 프로퍼티 값이 될 수 있으므로, 어떤 타입의 값이라도 배열의 요소가 될 수 있었던 것이다! 사실 배열은 객체이기 때문에!!

일반적인 배열과 자바스크립트 배열 장단점

• 일반적인 배열
  • 접근(O(1)) - 인덱스로 요소에 빠르게 접근할 수 있다.
  • 요소 삽입, 삭제하는 경우 비효율적
• 자바스크립트 배열
  • 접근(O(n)) - 사실은 해시테이블이기 때문에 선형 검색을 함
  • 요소 삽입, 삭제에 빠르다.

자바스크립트는 인덱스로 요소에 접근시 일반 배열보다 느리다는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구분하여 좀 더 배열처럼 동작하도록 최적화하였다. 따라서 배열이 일반 객체보다 약 2배 정도 빠르다.

length 프로퍼티와 희소 배열

프로퍼티 디스크립터를 통해 살펴 본 length 프로퍼티는 다음과 같다.

length: {value: 3, writable: true, enumerable: false, configurable: false}

writable이 true이니 직접 수정할 수 있고, enumerable이 false이니 반복문 등에서 length 프로퍼티는 제외하고 돌릴 수 있는 것이다.

일반적으로 배열에 요소를 추가, 삭제하면 length 프로퍼티 값은 자동 갱신된다. 그러나 임의의 숫자 값을 명시적으로 할당할 수도 있다.

현재 length보다 작은 값을 할당하는 경우

예를 들어 현재 length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.

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

arr.length = 3;

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

현재 length보다 큰 값을 할당하는 경우 - 희소 배열

length값은 변경하는 값으로 변경되지만, 실제 배열에는 아무런 변함이 없다. 값 없이 비어 있는 요소를 위해 메모리 공간을 확보하지 않으며, 빈 요소르 생성하지도 않는다.

const arr = [1];

arr.length = 3;

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

 

콘솔에 찍어보니 length의 value는 3이 되었지만, 실제로는 0의 키만 프로퍼티로 존재하고 있는 것을 알 수 있다.

 

이렇듯 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소배열이라 한다. 희소배열의 lenght는 희소 배열의 실제 요소 개수보다 언제나 크다. 자바스크립트는 문법적으로 이런 희소배열을 허용하지만 배열 개념에도 맞지 않고, 성능도 좋지 않으니 사용하지 않는게 좋다.

또한, 배열 생성시에는 같은 타입의 요소를 연속적으로 위치시키는 것이 우선이다.

유사배열객체와 배열의 차이

유사배열객체는 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length프로퍼티를 가지는 객체를 말한다.
위에서 배열과 일반 객체의 가장 큰 차이점이 바로 이 두가지라고 했는데, 그렇다면 무조건 이 두 가지만 충족하면 배열이지 않을까?

그렇지 않다. 콘솔에 찍어보면 차이를 가장 빨리 알 수 있다.

console.dir([1,2,3]);  // > Array(3)

const arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

console.dir(arrayLike);   // > Object

배열의 프로토타입은 Array인 반면, 유사배열 객체의 prototype은 Object인 것을 알 수 있다. 만약 유사배열객체를 배열로 만들어 Array의 __proto__를 사용하고 싶다면 Array.from을 통해 배열로 변경해 주면 된다.