🚦 본론

배열이란

배열은 정~말 사용 빈도가 많은 자료구조입니다.
순차적으로 여러 개의 값을 각 인덱스에 할당하여 손쉽게 접근할 수 있기 때문입니다.

const example = [1,2,3,4,5]

이때, 배열이 가진 값들을 요소라고 부릅니다.
그리고 이 요소에 접근하기 위한 위치를 우리는 인덱스라고 부르죠.

우리는 이러한 인덱스를 바탕으로 값의 순서를 매길 수 있으며, 순회 역시 가능합니다.
나아가 length 프로퍼티를 통해 길이를 알 수 있기도 하죠.

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

참 재미있는 파트입니다.
가끔, 파이썬을 해본 분들이시라면 이러한 당황스러움을 많이 접하셨을 것 같아요.

const a = [1,2,3,4,5]
a[-1] = 10
console.log(a) // [1, 2, 3, 4, 5, -1: 10]

쉽게 말하자면, 자바스크립트의 배열은 객체입니다.

객체라는 것은 무슨 의미를 가질까요? 마치 인덱스를 키로, 요소를 값으로 갖기 때문에, 실제로는 메모리에 순차적으로 값을 저장하지 않는다는 의미입니다. 이를 희소 배열이라고 하는데요!

희소배열은 아무래도 값들이 순차적으로 저장되는 것이 아니다 보니, 순수 인덱스를 통한 접근으로는 느립니다.

그러나, 순차적으로 값을 저장하는 밀집 배열과 달리, 특정 요소 검색이나 수정/삭제에 있어서는 값들이 변경되어도 뒤의 요소들을 다시 이동시킬 필요가 없기 때문에 성능이 빠릅니다.

그렇기에 실제로는 인덱스로 접근할 때에는 다른 언어보다 느릴 수밖에 없다는 한계가 있습니다. 이를 보완하기 위해서, 실제로 자바스크립트 엔진들은 배열을 최적화하였습니다.

🎉 결과적으로 일반 객체 대비 약 2배만큼의 성능이 개선되었다고 하네요!

length 프로퍼티와 희소 배열

희소배열은 순차적으로 값을 메모리에 저장하지 않습니다.
따라서, 이로 인한 재미 있는 일들이 많이 벌어질 수 있는데요.

자바스크립트의 배열은 length 프로퍼티를 갖고 있습니다.
이때, 이 length를 동적으로 변경하거나, 혹은 현재 최대 인덱스보다 더 큰 인덱스에 값을 추가하면 마치 동적으로 배열의 크기가 늘어난 것처럼 보입니다.

const arr = [1]
arr[5] = 5
console.log(arr) // [1, empty × 4, 5]

여기서 empty라는 건 따로 메모리에 값을 저장하지 않을 때 알려주기 위한 장치입니다.
실제로는 배열의 길이가 늘어나지도 않으며, 메모리 공간을 확보하지도 않습니다.

따라서 자바스크립트는 희소배열이며, 희소배열의 length는 항상 배열의 길이와 일치하지는 않습니다. (length >= 실제 배열의 길이)

다만 이러한 방식이 권장되지 않습니다. 오히려 자바스크립트 엔진의 최적화를 방해하는 요소이기 때문이죠.
모던 자바스크립트 엔진들은 기본적으로 타입이 같고 요소가 일치하는 배열을 생성할 때 가장 최적화가 잘 된다고 합니다.

따라서 희소배열로 생성하여 관리하기보다는, 가급적 같은 타입의 요소를 연속적으로 위치시키는 것이 바람직하겠군요!

🎉 마치며

사실 나머지는 너무나 당연한 얘기라, 생략합니다.
또한, 메서드의 경우에는 필요에 따라서 쓰면 됩니다.
굳이 이것을 하나하나 외운다는 것은, 영어 잘하겠다고 영어사전의 단어를 다 외우겠다는 발상에 불과합니다.

중요한 것은, 자바스크립트의 배열은 객체이며, 이 객체는 자바스크립트 내부에서 최적화가 되어 있다는 것입니다.

그리고 이 최적화의 기준은 같은 타입의 값이 연속적으로 들어 있을 수록 빠르다는 것입니다.
따라서 희소배열을 지양하며, 안정적인 자바스크립트 배열을 관리하는 것이 중요하다는 것이 이번 파트의 요지라고 할 수 있겠어요!

그럼, 다들 즐거운 공부하시길 바라며, 이상! 🌈