GS - ArrayBuffer, binary arrays

시작하기

ArrayBuffer, Unit8Array, DataView, Bolb, File, etc 가 있다.

Bolb 빼고 다 처음 접한다.

자바스크립트에서 바이너리 데이터는 비표준 방식으로 구현했다.

ArrayBuffer

제일 기본적인 바이너리 객체

let buffer = new ArrayBuffer(16);
alert(buffer)

34cr11n341ot 2020 10 12 13 50 34

41cr11n411ot 2020 10 12 13 50 41

위와 같이 버퍼를 만들게 되면 파라미터 값 크기 바이트 만큼 메모리 영역에 연속적으로 생성이 되고, 0으로 채워진다.

뷰에는 UintXArray - X는 8,16,32 와 Float64Array가 있다.

ArrayBuffer 구조

출처-코어자바스크립트

let buffer = new ArrayBuffer(16);

let view = new Uint32Array(buffer);

console.log(view);

view

배열과 ArrayBuffer의 차이점

  • ArrayBuffer는 길이가 고정되어있다.
  • ArrayBuffer는 메모리에 딱 필요한 만큼의 공간만 제공한다.
  • ArrayBuffer의 각 바이트에 접근하려면 인덱스로 접근하는게 아니라 ‘view’ 객체를 필요로 한다.

TypeArray

위에서느 view라고 했던 것들이 TypedArray이다.

TypedArray는 속성과 메서드의 집합과 같다고 보면 된다.

생성자가 없다.

인자로는 여러가지를 받을 수 있다.

  1. ArrayBuffer를 받을 수 있다.
  2. Array를 받을 수 있다.
  3. TypedArray를 받을 수 있다.
  4. length를 받을 수 있다.
  5. 인자를 안받을 수 있다.

그런데 이걸 어떻게 어디에 사용하면 좋을지..

범위가 초과된 비트에 대해서는 잘라버린다.

TypedArray methods

배열에서 사용하듯이 map, slice, find, reduce 등을 사용할 수 있다.

하지만,

splice 나 concat은 사용 못한다.

그리고 set과 subarray 메서드를 추가로 제공한다.

  • arr.set(fromArr, [offset])은 fromArr에 있는 걸 arr에 모두 복사하는 것이다.
  • arr.subarray([begin, end])는 begin부터 end-1까지 새로운 view를 만드는 것이다.(복사가 아님)

DataView

UnType 뷰라고 생각하면 되겠다. 어떤 위치에도 접근할 수 있다고 한다.

당장은 이 정도만 알아두면 될듯하다.

마무리

ArrayBuffer는 코어 객체이고, 고정된 길이의 연속적인 메모리 구역을 참고하고 있다.

데이터에 대한 접근을 하려면 view가 필요하다.

view는 UintXArray와 같은 것들이다.

이를 TypedArray 라고도 한다.


@kwonmory
성장을 위해 노력하고 있는 모리입니다.

깃허브