본문 바로가기

개발 공부

[JS] 형식화 배열이란?(Typed array)

1. 형식화 배열(typed array)

- 배열 같은 객체이며 원시 이진 데이터에 엑세스 하기 위한 메커니즘 제공
- 배열에 이용할 수 있는 모든 메서드가 형식화 배열에 지원하지 않는다(push, pop)

 

1-1. 형식화 배열 구조

- 버퍼: 데이터 부분을 나타내는 객체
- 뷰: 문맥(데이터 형)을 제공해 데이터를 실제 형식화 배열로 변환

 

 

1-2. 버퍼(Buffer)란?

- 임시로 바이너리 데이터를 저장하기 위한 메모리 공간 혹은 바이너리 데이터 자체
- Binary Data: 컴퓨터가 이해할 수 있는 0100 1001 형태의 이진수로 이루어진 데이터

 

1-3. ArrayBuffer

- 고정된 크기의 메모리 공간에 바이너리 데이터를 저장하는 객체.
- 콘텐츠를 조작할 수 없다.
- but, 형식화 배열 뷰 or DataView를 이용하면 읽고 쓰기 가능.

1-4. ArrayBuffer 와 TypedArray 관계

- TypedArray는 ArrayBuffer에 저장된 바이너리 데이터를 이용해 만드는 배열이며 개발자가 원하대로 구분하고, 원하는 타입의 데이터를 저장해 사용

 

1-4. ArrayBufferView

1-4-1. TypedArrayView


- 모든 일반 숫자 형을 위한 뷰 제공

 

1-4-2. Dataview

- 버퍼에 임의 데이터를 읽고 쓰기 위해 getter/setter API를 제공하는 저레벨 인터페이스

1-5. ArrayBuffer 데이터 구조

- 한번에 4byte로 인식하면 1개의 큰 숫자로 표현 가능
  (ex. 0~4294967296)
- 1byte씩 4개로 나누면 4개의 작은 숫자로 표현
  (ex. 0-255, 0-255, 0-255, 0-255)

 

//ArrayBuffer 생성: 4byte(4*8bit)의 이진데이터 저장.
const arrayBuffer = new ArrayBuffer(4);
//결과: [00000000 00000000 00000000 00000000]
```

```
const arrayBuffer = new ArrayBuffer(13);

const arr = new Uint8Array(arrayBuffer);
for (let i = 0; i < 14; i++) {
  arr[i] = i;
}
//결과:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr);

https://developer.mozilla.org/ko/docs/Web/JavaScript/Typed_arrays

 

 

JavaScript 형식화 배열 - JavaScript | MDN

JavaScript 형식화 배열(typed array)은 배열같은 객체이고 원시(raw) 이진 데이터에 액세스하기 위한 메커니즘을 제공합니다. 이미 아시다시피, Array 객체는 동적으로 늘었다 줄고 어떤 JavaScript 값이든

developer.mozilla.org

https://curryyou.tistory.com/441