48. 자바스크립트 타입드 배열 (Typed Arrays)

타입드 배열 (Typed Arrays)

자바스크립트에서 타입드 배열(Typed Arrays)은 바이너리 데이터를 효율적으로 다루기 위한 도구다. 숫자 데이터를 고정된 타입으로 저장하며, 일반 배열과 다른 특성을 가진다. 타입드 배열의 개념, 사용 방법, 활용 사례를 예제로 확인해보자.

타입드 배열은 주로 성능이 중요한 상황에서 사용된다.

타입드 배열(Typed Arrays)이란 무엇인가?

타입드 배열은 고정된 크기와 데이터 타입을 가진 배열로, ArrayBuffer를 기반으로 동작한다. 일반 배열과 달리 동적 크기 조정이 불가능하다. 기본적인 예제를 보자:

const buffer = new ArrayBuffer(8); // 8바이트 버퍼
const array = new Int32Array(buffer);
array[0] = 42;
console.log(array[0]); // 42

Int32Array는 32비트 정수 타입으로 데이터를 저장한다.

타입드 배열의 종류와 생성

타입드 배열은 다양한 데이터 타입을 지원한다. 주요 타입과 생성 방법을 예제로 확인해보자.

1. 주요 타입드 배열

- Int8Array: 8비트 정수 (-128 ~ 127)

- Uint8Array: 8비트 부호 없는 정수 (0 ~ 255)

- Int32Array: 32비트 정수

- Float64Array: 64비트 부동 소수점

const int8 = new Int8Array(2);
int8[0] = 127;
console.log(int8[0]); // 127

2. ArrayBuffer와 뷰

ArrayBuffer에 여러 뷰를 적용할 수 있다:

const buffer2 = new ArrayBuffer(4);
const uint8 = new Uint8Array(buffer2);
const int16 = new Int16Array(buffer2);
uint8[0] = 255;
console.log(int16[0]); // 메모리 공유로 값 변동 가능

타입드 배열의 동작 방식

타입드 배열은 메모리를 직접 조작하며, 일반 배열과 다른 특징을 가진다. 예제로 확인해보자.

1. 고정 길이

길이를 변경할 수 없다:

const typed = new Uint16Array(3);
typed[0] = 1;
console.log(typed.length); // 3
typed[3] = 4; // 무시됨
console.log(typed); // Uint16Array [1, 0, 0]

2. 메모리 효율성

불필요한 타입 변환이 없다:

const regular = [1.5, 2.7];
const float32 = new Float32Array([1.5, 2.7]);
console.log(float32); // Float32Array [1.5, 2.7]

사용 사례

타입드 배열을 활용한 몇 가지 예제를 확인해보자.

1. 바이너리 데이터 처리

파일 데이터를 다룰 때 유용하다:

const buffer3 = new ArrayBuffer(4);
const dataView = new DataView(buffer3);
dataView.setInt16(0, 1234);
console.log(dataView.getInt16(0)); // 1234

2. 그래픽 데이터

WebGL에서 버텍스 데이터를 저장한다:

const vertices = new Float32Array([0.0, 1.0, 0.0, -1.0]);
console.log(vertices); // Float32Array [0, 1, 0, -1]

3. 성능 최적화

대량의 숫자 연산에 효율적이다:

const numbers = new Int32Array(1000);
for (let i = 0; i < numbers.length; i++) {
    numbers[i] = i;
}
console.log(numbers[999]); // 999

성능과 한계

장점

- 속도: 메모리 접근이 빠르고 타입 변환이 없다.

- 효율성: 바이너리 데이터를 직접 조작 가능.

한계

- 유연성 부족: 동적 크기 조정 불가.

- 복잡성: ArrayBuffer와 뷰를 이해해야 한다.

DataView는 바이트 단위로 세밀한 제어가 필요할 때 유용하다.

마무리

타입드 배열(Typed Arrays)은 자바스크립트에서 바이너리 데이터를 다루는 도구다. 주요 타입과 활용 사례를 예제로 다뤘다.