[JS] ArrayBuffer와 DataView : TypedArray

 

ArrayBuffer는 다음과 같은 상황에서 유용하다.

어떤 API가 커다란 사이즈의 Buffer를 통째로 받아야 해서, Buffer에 여러가지 정보를 담아서 넘겨야 한다.

(예를 들어 WebGL. 여러가지 Instance의 정보를 한꺼번에 Buffer에 담아서 넘겨야 한 번에 Buffer를 보고 쭉 그릴 수 있다.)

 

C/C++라면 memcpy를 사용해도 되고 포인터를 이용해서 직접 써도 되지만, JS는 그렇지 않다.

 

그래서 ArrayBuffer를 이용해서 커다란 Buffer를 할당한 다음, (malloc)

Type, byteOffset, length를 지정해서 Buffer의 일부 영역을 Chunk로 반환 받을 수 있다. (포인터로 연결하는 것 같은 느낌)

 

Buffer

Chunk1 (Int32Array)

Chunk2 (Float32Array)

...

...

 

```js

let buffer = new ArrayBuffer(1024);

 

let chunk1 = new Int32Array(buffer, 0, 128);    // buffer, offset, length

let chunk2 = new Float32Array(buffer, 4 * 128, 128);

```

이 때 chunk를 반환 받는 것은 단순히 Buffer에 접근하는 포인터라고 할 수 있기 때문에, chunk를 겹치게 만드는 것도 가능하다.

```js

// chunk1[127]과 chunk2[0]이 겹친다.

let chunk1 = new Int32Array(buffer, 0, 128);
let chunk2 = new Float32Array(buffer, 4 * 127, 128);

```

chunk1[127]과 chunk2[0]은 같은 데이터를 가리키므로 실제로 가지고 있는 데이터는 동일하지만, 타입이 다르기 때문에 어떻게 접근하느냐에 따라 다른 값으로 보인다. (DataView)

```js

> chunk1[127] = 1
1
> chunk2[0]
1.401298464324817e-45

```