27장 배열 | Notion

<aside> 💡

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.

</aside>

배열이 가진 값을 요소(element)라고 부른다.

배열의 요소는 자신의 위치를 나타내는 정수 인덱스를 갖는다.

객체와 구분하는 가장 명확한 차이는 값의 순서와 length 프로퍼티의 유무다.

자바스크립트 배열은 배열이 아니다.

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열이라 한다. 이 경우, 데이터 타입이 통일되어 있기에 특정 인덱스의 메모리 주소가 어디 있는지 바로 찾아갈 수 있다. 또한 배열에 요소를 삽입하거나 삭제하는 경우 뒤에 요소를 이동시켜야 한다.

하지만 자바스크립트의 배열은 요소들의 메모리 공간이 동일하지 않으며, 연속적으로 이어져 있지 않을 수도 있는 희소배열이다. 즉, JS의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

{
  '0': { value: 1, writable: true, enumerable: true, configurable: true },
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '2': { value: 3, writable: true, enumerable: true, configurable: true },
  length: { value: 3, writable: true, enumerable: false, configurable: false }
}

JS는 인덱스로 요소에 접근하는 경우 밀집 배열보다 성능적인 면에서 느리다. 하지만, 삽입/삭제에 대해서 빠른 성능을 기대할 수 있다.
JS 엔진 내부적으로 객체에 비해서는 더 빠르게 배열처럼 동작하도록 최적화 했기 때문에 인덱스로 접근할때, 일반 객체보다는 약 2배정도 빠르다.

length 프로퍼티와 희소배열

length 프로퍼티 값을 변경해도 실제 배열의 길이가 늘어나지는 않는다. 즉, 실제 배열에는 변함이 없다. 메모리 공간을 확보하지 않고 빈 요소를 생성하지도 않는다.

이처럼 자바스크립트의 희소배열은 요소가 중간이나 앞부분이 비어있을 수 있다.

하지만 JS 문법적으로 허용되지만, 희소배열을 생성하지 않고, 같은 타입의 요소를 연속적으로 위치시키는 것을 권장한다.

배열의 요소 삭제

배열은 사실 객체이기 때문에 배열의 특정 요소 삭제를 위해 delete 연산자를 사용할 수 있다. 하지만 length는 변하지 않기 때문에 delete 대신 splice를 사용하는 것이 좋다.

배열 메서드

배열 메서드에는 결과물을 반환하는 두가지 패턴이 있다.

원본 배열을 직접 변경하는 메서드(Mutator Method)
원본 배열을 직접 변경하지 않고, 배열을 생성해서 반환하는 메서드(Accessor Method)

push 메서드는 성능이 좋지 않다. 마지막 요소로 추가할 요소가 하나 뿐이라면, length 프로퍼티를 사용해서 배열의 마지막에 요소를 직접 추가하는게 빠르다.

arr.push(a) < arr[arr.length] = a

pop, push, shift, unshift보다 원본 배열을 수정하지 않는 전개연산자를 사용하는 것이 좋다.