자바스크립트의 배열은 알고보니 객체였다?

이전 글에서 자바스크립트는 원시값(primitive values)를 제외하고는 모두 내부적으로 객체처럼 동작한다는 언급을 했었는데요. 자바스크립트에서 배열은 원시값에 해당하지 않습니다. 그렇다면 자바스크립트에서 배열은 어떻게 동작할까요?

 

객체처럼 동작하는 자바스크립트의 배열

자바스크립트에서는 배열을 만들면, Object를 상속하는 Array 클래스를 사용하여 객체를 만듭니다. 예시 코드를 살펴보겠습니다.

 

let arr = [];

arr.push(1);
arr.push(2);
arr.push("Prince");
arr.push("Aditya");

let keys = Object.keys(arr).join(" ");
let values = Object.values(arr).join(" ");

console.log("The keys of array is: " + keys);
console.log("The values of array is: " + values);

• arr에 1, 2, "Prince", "Aditya"라는 값을 push 메서드를 사용하여 삽입하였습니다.
• Object.keys라는 메서드를 사용해 arr의 모든 key값을 출력하면 0,1,2,3이 출력됩니다.
• Object.values라는 메서드를 사용해 arr의 모든 values값을 출력하면 1,2,Price,Aditya이 출력됩니다.
• { "0": 1, "1": 2, "3": "Prince", "4": "Aditya" } 와 같은 객체를 만든 것과 동일하게 동작한다.

위의 예제를 통해서 다음의 결과를 도출할 수 있습니다.

배열은 내부적으로 객체처럼 동작한다.
그래서 서로 다른 타입의 값을 배열에 할당할 수 있다.

 

배열의 키는 사실 문자열이다.

const arr = [1,2,3,4];
console.log(typeof Object.keys(arr)[0]); // string

 

arr[0]의 키 값의 타입을 출력하니 string이 나왔습니다. 사실 배열의 키 값에는 number이 아닌 string이나 Symbol값만 사용할 수 있습니다. 따라서 내부적으로 "0": 1과 같이 저장을 하고있었습니다.

 

const arr = [1,2,3,4];
console.log(arr[0]); // 1
console.log(arr['0']); // 1

 

따라서 배열의 요소를 접근할 때에는 0으로 접근할 수도 있지만 '0'으로도 동일하게 접근 가능합니다. 위의 예제를 통해서 다음의 결과를 도출할 수 있습니다.

 

자바스크립트 배열 객체의 키 값은 문자열이다.

 

객체의 단점을 보완한 자바스크립트의 배열

 

일반적으로, 배열을 사용하면 인접한 메모리에 연속적으로 같은 타입을 할당하기 때문에 인덱스로 매우 빠르게 접근할 수 있으나, 요소를 삽입 또는 삭제하려는 경우 효율적이지 않다는 특징을 가집니다. 그러나 자바스크립트의 배열은 해시테이블로 구현된 객체이기 때문에 일반적인 배열보다 접근이 느리지만, 요소를 삽입 또는 삭제할 경우에는 일반적인 배열보다 빠릅니다.

모던 자바스크립트 엔진에서는 타입이 일치하는 배열을 생성할 때, 이를 최적화하기 위해 연속된 메모리 공간을 확보합니다. 따라서 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 좋습니다.

 

참고

• 모던 자바스크립트 Deep Dive 27장
• MDN 문서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array 
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array