자바스크립트 타입 배열(Typed Arrays) 완벽 이해하기

자바스크립트 타입 배열(Typed Array)은 일반 배열과 유사한 객체로, 원시 바이너리 데이터(raw binary data)에 접근할 수 있는 메커니즘을 제공합니다.

일반적인 자바스크립트 배열은 동적으로 크기가 늘어나거나 줄어들 수 있으며, 어떤 자바스크립트 값이든 담을 수 있습니다. 또한 자바스크립트 엔진은 이러한 배열이 빠르게 동작하도록 다양한 최적화를 수행합니다.

타입 배열과 일반 배열의 차이

주의: 타입 배열을 일반 배열과 혼동해서는 안 됩니다. 타입 배열에 Array.isArray()를 호출하면 false가 반환되며, 일반 배열에서 사용할 수 있는 모든 메서드가 타입 배열에서 지원되는 것도 아닙니다.

버퍼(Buffer)와 뷰(View)

자바스크립트 타입 배열은 버퍼(buffer)와 뷰(view)라는 두 가지 개념으로 구현됩니다.

• 버퍼(Buffer): 데이터 덩어리(chunk)를 나타내는 객체입니다. 버퍼 자체는 특정 형식을 갖지 않으며, 내용에 접근할 수 있는 방법도 제공하지 않습니다.
• 뷰(View): 버퍼에 담긴 메모리에 접근하려면 반드시 뷰를 사용해야 합니다. 뷰는 데이터 타입, 시작 오프셋(offset), 요소의 개수를 지정하여 버퍼의 데이터를 타입 배열로 변환해 줍니다.

예제 코드

// 16바이트 크기의 고정 길이 버퍼 생성
let buffer = new ArrayBuffer(16);

// 버퍼를 실제로 다루려면 먼저 뷰(view)를 생성해야 합니다.
// 버퍼의 데이터를 32비트 부호 있는 정수 배열로 취급하는 뷰를 만들어 보겠습니다.
let int32View = new Int32Array(buffer);

// 일반 배열처럼 배열의 요소에 접근할 수 있습니다.
for (let i = 0; i < int32View.length; i++) {
    int32View[i] = i * 2;
}
console.log(int32View);

실행 결과

Int32Array { [Iterator] 0: 0, 1: 2, 2: 4, 3: 6 }

위 예제에서 16바이트 버퍼는 4개의 32비트 정수(각각 4바이트)를 저장할 수 있습니다. 뷰를 통해 버퍼의 원시 바이트를 의미 있는 숫자 값으로 읽고 쓸 수 있게 되는 것입니다.