[TIL] 자바스크립트 배열의 객체 기반이란?

배열은 객체다

자바스크립트 배열은 객체의 일종으로, 숫자 인덱스를 키로 사용해 값을 저장합니다. 일반 객체가 { key: value } 형태로 문자열 키를 사용한다면, 배열은 { "0": value, "1": value }처럼 숫자 키를 사용해요.

let arr = ['a', 'b', 'c'];
// 내부적으로는
let arr = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3
};

이 구조 덕분에 배열은 객체의 유연성을 가지면서도, push(), map() 같은 배열 전용 메서드를 사용할 수 있습니다.

객체 기반의 핵심 특징

1. 숫자 인덱스와 length 속성
   배열은 0부터 시작하는 숫자 인덱스로 요소에 접근합니다. length 속성은 가장 큰 인덱스 + 1로 자동 갱신됩니다.

let arr = ['a', 'b'];
console.log(arr.length); // 2
arr.push('c');
console.log(arr.length); // 3

2. 해시 테이블 같은 자료구조
   자바스크립트 배열은 해시 테이블 비슷한 구조로 데이터를 저장합니다. 해시 테이블은 키-값 쌍을 효율적으로 관리하는 자료구조로, 메모리에서 데이터를 연속적으로 저장하지 않아도 됩니다.
   이 특성 덕분에 배열은 희소 배열(sparse array)을 지원합니다. 희소 배열은 일부 인덱스가 비어 있는 배열로, 모든 인덱스에 값이 연속적으로 채워져 있지 않습니다.

   let arr = [];
   arr[0] = 'a';
   arr[100] = 'b';
   // 출력: [ 'a', <99 empty items>, 'b' ]
   // 내부적으로: { "0": "a", "100": "b", length: 101 }
   console.log(arr.length); // 101
   console.log(arr[50]); // undefined

   희소 배열은 메모리를 절약하지만, forEach() 같은 메서드는 빈 인덱스를 건너뜁니다.

   arr.forEach((item, index) => console.log(index, item));
   // 출력:
   // 0 'a'
   // 100 'b'

3. 크기 유연성
   해시 테이블 구조 덕분에 배열은 크기를 미리 정하지 않아도 됩니다. 요소를 추가하거나 제거할 때 동적으로 확장/축소됩니다.

   let arr = [];
   arr.push(1, 2, 3); // [1, 2, 3]
   arr.pop(); // [1, 2]
   console.log(arr.length); // 2

4. 객체처럼 속성 추가 가능
   배열은 객체이므로 숫자 인덱스 외의 속성을 추가할 수 있습니다.
   다만, 이런 속성은 length나 배열 메서드(map(), forEach())에 영향을 주지 않습니다

   let arr = ['a', 'b'];
   arr.myProp = 'test';
   console.log(arr.myProp); // 'test'
   console.log(arr); // ['a', 'b']
   console.log(arr.length); // 2

장점과 단점

장점
유연성: 크기 제한 없이 요소를 추가/제거할 수 있고, 다양한 데이터 타입을 섞어서 저장 가능.
메모리 효율: 필요한 데이터만 저장해 메모리 낭비를 줄임.
확장성: Array.prototype 메서드(map(), filter() 등)로 복잡한 작업을 간단히 처리.

단점
성능: 메모리가 연속적이지 않아 순회나 접근 속도가 느릴 수 있음.
복잡성: 객체 기반이라 예기치 않은 동작이 있을 수 있음.

정리

자바스크립트 배열은 객체 기반으로 동작하며, 숫자 인덱스를 키로 사용하는 특수한 객체입니다. 해시 테이블 같은 구조 덕분에 메모리에서 연속적일 필요가 없고, 크기를 미리 정하지 않아도 유연하게 사용할 수 있어요.