나 배열 아니다 : Javascript Array

Javascript의 배열은 배열이 아니다. 이게 무슨 소리일까. 배열이 배열이 아니라니.

배열(Array)은 여러개의 값을 메모리 상에 연속적으로 나열한 자료구조이다. 배열의 원소는 모두 같은 크기를 갖게 되며, 모두 같은 자료형을 갖는다. 첫번째 값의 주소가 0x10이고, 각 원소의 크기가 16이라면 다음 값의 주소는 0x20이 되는 식이다. 당연히 세번째는 0x30이 되겠다.

이런 배열을 밀집배열(Dense Array) 이라고 하는데, 원소의 메모리 주소와 인덱스 간의 규칙이 있으므로 임의의 원소에 빠르게 접근(Random Access)이 가능하다. 첫번째 주소가 0x10이고 크기가 16이라는 정보를 알면 n번째 원소의 주소는 0x10+16*n임을 바로 알 수 있다.

하지만 Javascript의 배열에서는 다음과 같이 서로 자료형이 다르더라도 배열에 담을 수 있다.

imNotArray = [
    23,
    0.41,
    '안녕하세요', // ?
    [1, 2, Math.max], // ??
    {
        a: 3,
        b: 'chaos'  
    } // ????
];

정말 아무거나 다 들어갈 수 있다.

이렇듯 다른 언어에서의 Array와는 전혀 다른 모습을 보여준다. MDN에서는 Javascript의 Array를 다음과 같이 설명하고 있다.

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체(list-like objects)입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.

즉, Javascript에서의 배열은 일반적인 언어에서의 밀집 배열을 의미하는 것이 아닌 리스트(list)처럼 인덱스를 갖는 특수한 객체(object) 다. Javascript에서 객체는 key와 property를 갖는데, Array 프로토타입에서는 인덱스가 key, 배열의 원소가 property가 된다. 배열의 구현을 살펴보면 인덱스를 key로 갖는 해시 테이블 구조를 만들어 어느 인덱스로도 빠른 접근이 가능하도록 하는 구현이 대부분이다. (ECMA표준은 구현 방식을 강제하지는 않으므로 항상 이렇게 구현되지 않을 수 있다.)

그러나 모던 자바스크립트 엔진들은 모두 밀집 배열보다 느린 단점을 보완하고자 배열 객체는 일반적인 배열과 다르게 동작하게끔 하여 속도를 개선했다. 아래 두 코드는 서로 다른 성능을 보인다. (작게는 2배에서 크게는 10배까지도 차이가 난다.)

// Chrominum v94.0, arm64
const arr = [];

for (let i = 0; i < 10e7; i++) {
  arr[i] = i;
}
// 약 130ms

const obj = {};

for (let i = 0; i < 10e7; i++) {
  obj[i] = i;
}

// 약 1350ms

레퍼런스

1. Array - Javascript | MDN. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
2. Advanced Javascript: Objects, Arrays, and Array-Like objects. https://www.nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/
3. What is Array Like Object in JavaScript. https://dev.to/capscode/what-is-array-like-object-in-javascript-3f5m
4. 자바스크립트 배열은 배열이 아니다 https://poiemaweb.com/js-array-is-not-arrray