자바스크립트의 배열은 일반적인 프로그래밍 언어들의 배열과 다르다. java, c++과 같은 다른 언어들의 배열은 같은 자료형의 데이터만 포함 가능하며, 데이터가 메모리 안에서 연속적으로 나란히 공간을 차지하고 있기 때문에 배열의 인덱스로 데이터에 접근 속도가 빠르다.
하지만 자바스크립트의 배열은 한 배열에 여러 종류의 자료형이 저장될 수 있기 때문에 메모리에 나란히 저장되어 있는 것이 아니라 여러 위치에 데이터가 저장되게 된다. 때문에 데이터 접근 속도는 다른 언어보다 상대적으로 느리다.
데이터가 연속적으로 붙어 있다면 배열의 시작 주소로부터 접근하고자 하는 인덱스만 이동하면되지만 자바스크립트의 배열은 데이터가 저장된 위치를 직접 찾아가야 하기때문에 상대적인 속도 차이가 존재한다.
자바스크립트에서의 배열은 배열의 형태와 동작을 흉내내는 특수 객체다. 배열이 연속 나열이 아니기 때문에 중간 요소의 추가나 제거는 다른 언어보다 빠른 편이다.
그러나 자바스크립트 엔진 성능에 따라서 같은 자료형을 저장할 경우 연속적으로 나열해 주기도 한다. 자바스크립트에는 특정 자료형 전용 배열도 있다. 접근 속도가 중요한 애플리케이션을 개발할 때 사용하면 성능 개선에 도움이 된다.
자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체라는 말의 의미를 알아보자.Object.getOwnPropertyDescriptors() 메서드를 이용하여 자바스크립트 배열 객체의 모든 프로퍼티 내용을 반환해 볼 수 있다.
console.log(Object.getOwnPropertyDescriptors([1, 2, 3]));
console.log(typeof [1, 2, 3]);
/*
{
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 }
}
object
*/위 코드의 결과를 살펴보자. 0~2와 length라는 특수한 객체 프로퍼티를 가진 것을 확인할 수 있다. 즉, 자바스크립트 배열의 요소는 사실 프로퍼티 값이다.
자바스크립트에서 하나의 배열에는 다양한 자료형이 저장될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있다.
그러나 이러한 유연성은 속도와 관련된 문제를 일으킬 수 있다. 자바스크립트 엔진은 배열이 어떤 형태로 구성되어 있는지에 따라 다른 방식으로 처리한다.
만약 배열에 동일한 데이터 타입의 값들이 연속적으로 저장되어 있다면, 자바스크립트 엔진은 이를 연속적인 메모리 공간에 할당하고 인덱스를 이용해 빠르게 데이터에 접근할 수 있도록 처리한다. 이 때는 C나 Java와 같은 언어의 배열과 비슷한 성능을 보인다.
const arr = [1, 2, 3];그렇다면 자바스크립트 엔진은 객체와 배열을 어떻게 다르게 인식할까?
결론부터 말하면 객체는 Object 클래스의 인스턴스로 취급되며, 배열은 Array 클래스의 인스턴스로 취급된다.
이러한 클래스 인스턴스들은 내부적으로 다른 속성과 메서드를 가지고 있다.
예를 들어, new Array()와 []는 동일한 배열 인스턴스를 생성하지만, []로 배열을 생성하는 것이 더 간단하다. 배열 인스턴스는 length 속성과 push(), pop(), splice() 등의 배열 전용 메서드를 가지고 있다.
반면, 객체 인스턴스는 일반적으로 key: value 형태로 구성된 속성을 가지고 있으며, Object.keys(), Object.values(), Object.entries()와 같은 메서드를 사용하여 객체 속성을 조작할 수 있다.
const arr = new Array();
const obj = {};
console.log(arr);
/*
length: 0
[[Prototype]]: Array(0)
*/
console.log(obj);
/*
{}
[[Prototype]]: Object
*/배열과 객체는 비슷한 면도 있지만, 내부적으로 다른 속성과 메서드를 가지고 있으므로, 해당 인스턴스를 어떤 용도로 사용할지 결정하는 것이 중요하다.
