[Javascript] Array의 구조 (V8)

여기서는 V8의 동작만 정리한다. 브라우저마다 동작방식이나 구조는 크게 다르다.

Javascript에서의 Array는 다른 언어들의 Array와 크게 다르다. 순수한 배열이 아니라 Object의 한 종류로서 취급되기 때문이다.

위와 같이 Object가 딕셔너리 형태면 properties에 데이터를 저장하고, 키가 숫자인 배열 형태면 elements에 값을 저장한다. elements에 값이 들어있으면 이제 배열이 되는 것이다.

배열 타입 전환

배열에는 아무 타입이나 막 들어가는 것처럼 보이지만, 사실 내부적으로는 굉장히 복잡한 타입과 상태를 변화무쌍하게 오간다.

예를 들어, 다음과 같이 정수값을 포함하는 배열을 생성하면 PACKED_SMI_ELEMENTS라는 모드로 배열이 만들어진다.

const array = [1, 2, 3];
// elements kind: PACKED_SMI_ELEMENTS

SMI는 작은 정수를 뜻하는 단어인데, 보통 이게 가장 빠르게 최적화가 된다.

물론 JS는 동적 타입 언어고, 언제든 실수나 문자열 같은 괴상망측한 값을 넣을 수도 있다.

const array = [1, 2, 3];
// elements kind: PACKED_SMI_ELEMENTS
array.push(4.56);
// elements kind: PACKED_DOUBLE_ELEMENTS
array.push('x');
// elements kind: PACKED_ELEMENTS

타입의 일관성을 지키지 못할때마다 더 일반적인 형태의 배열타입으로 변경이 된다.
당연히 밑으로 갈수록 느려진다.

여기서 유의할 점은 PACKED_ELEMENTS처럼 일반화된 타입으로 내려온 배열은, 그걸 다시 빼더라도 PACKED_SMI_ELEMENTS나 PACKED_DOUBLE_ELEMENTS 같은 보다 빠른 타입으로 돌아오지 못한다는 것이다. 되도록이면 타입의 일관성을 지켜주는 편이 좋다.

구멍 뚫린 배열 (HOLEY)

JS의 배열은 일반적인 언어들의 배열 구현과 다르게, 인덱스를 건너뛰어서 값을 할당하는 이상한 짓이 가능하다.

const array = [1, 2, 3, 4.56, 'x'];
// elements kind: PACKED_ELEMENTS

array.length; // 5
array[9] = 1; // array[5] until array[8] are now holes
// elements kind: HOLEY_ELEMENTS

5 인덱스를 건너뛰고 9 인덱스에 값을 박았음에도 놀랍게도 잘 동작한다.
이건 내부적으로 새로운 배열을 생성해서

실제로 길이도 10이 되었다. 중간의 요소들은 구멍(hole)이 된 것이다.
구멍 배열(holey)과 비교해서 구멍이 없는 배열을 PACKED라고 부르는데, 당연히 PACKED 배열이 최적화가 훨씬 잘 된다.

아래는 배열 타입이 변경될 수 있는 루트를 그림으로 표현한 것이다.

지나온 길은 돌아올 수 없다.

배열처럼 생긴 객체

Javascript에서는 애초에 배열과 객체의 경계가 흐릿하다보니 객체로 초기화해서 배열처럼 쓸 수도 있다.

const arrayLike = {};
arrayLike[0] = 'a';
arrayLike[1] = 'b';
arrayLike[2] = 'c';
arrayLike // { '0': 'a', '1': 'b', '2': 'c' }

이건 성능상 별로 좋은 사용법은 아니다. 더 느린 Object 형태로 동작하기 때문이다.
차라리 배열을 사용하는 것이 좋다.

존재하지 않는 요소 접근하지 말기

JS는 엄.격.한 다른 언어들과 다르게 존재하지 않는 요소에 접근해도 out of range 오류를 뱉지 않는다.

undefined가 떨어질 뿐이다.

이것도 의외로 성능상 악영향을 줄 수 있는 부분이다.
내부적으로 properties까지 참조해서 저게 있는지 없는지를 검사하기 때문이라고 한다. 심지어 저 영향은 휘발적인것도 아니다.
V8은 저 배열에 대해서 특수한 접근을 할 수 있다는 것을 기억하고 뭔가 더 느린 방식으로 처리를 하기 때문에, 저 배열 자체에 대한 접근 성능이 떨어진다.

대표적으로 제이쿼리가 이런 안티패턴을 써서

// Don’t do this!
for (let i = 0, item; (item = items[i]) != null; i++) {
  doSomething(item);
}

성능이 느린 부분이 있었다고 한다. 저러지는 말자.

Array() 함수로 배열 생성

이건 이견이 좀 갈릴 수도 있는 부분이다.
Array 생성자 함수는 배열의 길이를 받아서 해당 길이의 빈 배열을 생성할 수 있다.

이건 push를 반복할때 생기는 생기는 growing 작업이 발생하지 않기 때문에, 할당 성능이 좀더 낫고 사이즈도 딱 슬림하게 만들어진다는 장점이 있다.
하지만 이 생성 방식은 배열을 PACKED가 아니라 HOLEY 배열로 생성한다는 단점도 동시에 존재한다. 공간을 아끼기 위해서인 것 같다.

하지만 V8 개발자인 jmrk의 의견에 따르면 어차피 packed와 holey의 성능 차이는 거의 느끼기가 어렵고, push를 반복하면서 증가에서 발생하는 성능 부하가 훨씬 커서 그냥 생성 함수를 쓰는 것을 권장한다고 한다.

참조
https://v8.dev/blog/fast-properties?m=1
https://v8.dev/blog/elements-kinds
https://stackoverflow.com/questions/54481918/how-does-v8-optimise-the-creation-of-very-large-arrays