ArrayBuffer

ArrayBuffer

ArrayBuffer 객체는 일반적인 원시(raw) 바이너리 데이터 버퍼를 나타내는 데 사용된다. 바이트들의 배열로, 다른 언어에서는 흔히 "바이트 배열(byte array)"이라고 부른다.

출처: ArrayBuffer - JavaScript | MDN

본문

개요

ArrayBuffer는 바이트 배열이다. ArrayBuffer의 내용을 직접 조작할 수는 없으며, 대신 버퍼를 특정 형식으로 나타내는 typed array 객체나 DataView 객체를 만들어 그 객체를 통해 버퍼의 내용을 읽고 쓴다.

ArrayBuffer() 생성자는 주어진 길이(바이트 단위)의 새 ArrayBuffer를 생성한다. 또한 Base64 문자열이나 로컬 파일 등 기존 데이터로부터 array buffer를 얻을 수도 있다.

ArrayBuffer는 전송 가능한(transferable) 객체이다.

ArrayBuffer 크기 조정(Resizing ArrayBuffers)

ArrayBuffer() 생성자를 호출할 때 maxByteLength 옵션을 포함하면 ArrayBuffer 객체를 크기 조정 가능하게 만들 수 있다. ArrayBuffer가 크기 조정이 가능한지, 최대 크기가 얼마인지는 각각 resizable과 maxByteLength 속성으로 조회할 수 있다. 크기 조정 가능한 ArrayBuffer에는 resize() 호출로 새 크기를 지정할 수 있으며, 새 바이트는 0으로 초기화된다.

이러한 기능은 ArrayBuffer의 크기 조정을 더 효율적으로 만든다. 그렇지 않으면 새 크기의 버퍼 복사본을 만들어야 하기 때문이다. 또한 이는 JavaScript가 이 측면에서 WebAssembly와 동등한 기능을 갖게 해 준다(Wasm 선형 메모리는 WebAssembly.Memory.prototype.grow()로 크기를 조정할 수 있다).

ArrayBuffer 전송(Transferring ArrayBuffers)

ArrayBuffer 객체는 structured clone 알고리즘을 사용해 Web Workers나 Service Workers 같은 다른 실행 컨텍스트 간에 전송할 수 있다. 이는 Worker.postMessage()나 ServiceWorker.postMessage() 호출에서 ArrayBuffer를 transferable 객체로 넘기는 방식으로 수행된다. 순수 JavaScript에서는 transfer() 또는 transferToFixedLength() 메서드를 사용해 메모리 소유권을 한 ArrayBuffer에서 다른 것으로 옮길 수도 있다.

ArrayBuffer가 전송되면 원본 복사본은 분리(detach)된다. 즉 더 이상 사용할 수 없게 된다. 어느 순간에도 실제로 기본 메모리에 접근할 수 있는 ArrayBuffer 복사본은 단 하나만 존재한다. 분리된 버퍼는 다음과 같은 동작을 보인다:

  • byteLength가 0이 된다(버퍼와 연관된 typed array 뷰 모두에서).
  • resize()와 slice() 같은 메서드를 호출하면 TypeError가 발생한다. 연관된 typed array 뷰의 메서드도 TypeError를 발생시킨다.
  • ArrayBuffer가 분리되었는지는 detached 속성으로 확인할 수 있다.

생성자(Constructor)

  • ArrayBuffer() — 새로운 ArrayBuffer 객체를 생성한다.

정적 속성(Static properties)

  • ArrayBuffer[Symbol.species] — 파생된 객체를 만드는 데 사용되는 생성자 함수.

정적 메서드(Static methods)

  • ArrayBuffer.isView() — arg가 typed array 객체나 DataView 같은 ArrayBuffer 뷰 중 하나이면 true를, 그렇지 않으면 false를 반환한다.

인스턴스 속성(Instance properties)

ArrayBuffer.prototype에 정의되며 모든 ArrayBuffer 인스턴스가 공유한다.

  • ArrayBuffer.prototype.byteLength — ArrayBuffer의 크기(바이트). 배열 생성 시 설정되며, ArrayBuffer가 resizable일 때만 ArrayBuffer.prototype.resize() 메서드로 변경할 수 있다.
  • ArrayBuffer.prototype.constructor — 인스턴스 객체를 생성한 생성자 함수. 초기 값은 ArrayBuffer 생성자이다.
  • ArrayBuffer.prototype.detached — 읽기 전용. ArrayBuffer가 분리(전송)되었으면 true, 아니면 false를 반환한다.
  • ArrayBuffer.prototype.maxByteLength — 읽기 전용. ArrayBuffer가 조정될 수 있는 최대 길이(바이트). 배열 생성 시 설정되며 변경할 수 없다.
  • ArrayBuffer.prototype.resizable — 읽기 전용. ArrayBuffer의 크기를 조정할 수 있으면 true, 아니면 false를 반환한다.
  • ArrayBuffer.prototype[Symbol.toStringTag] — [Symbol.toStringTag] 속성의 초기 값은 문자열 "ArrayBuffer". Object.prototype.toString()에서 사용된다.

인스턴스 메서드(Instance methods)

  • ArrayBuffer.prototype.resize() — ArrayBuffer를 지정된 크기(바이트)로 조정한다.
  • ArrayBuffer.prototype.slice() — 이 ArrayBuffer의 바이트를 begin(포함)부터 end(제외)까지 복사한 내용을 가진 새 ArrayBuffer를 반환한다. begin이나 end가 음수이면 배열 시작이 아닌 끝에서부터의 인덱스를 나타낸다.
  • ArrayBuffer.prototype.transfer() — 이 버퍼와 동일한 바이트 내용을 가진 새 ArrayBuffer를 만든 후 이 버퍼를 분리한다.
  • ArrayBuffer.prototype.transferToFixedLength() — 이 버퍼와 동일한 바이트 내용을 가진 새 비조정(non-resizable) ArrayBuffer를 만든 후 이 버퍼를 분리한다.

예제

ArrayBuffer 생성하기

이 예제에서는 버퍼를 참조하는 Int32Array 뷰를 가진 8바이트 버퍼를 만든다:

const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);

명세(Specifications)

  • ECMAScript® 2027 Language Specification — sec-arraybuffer-objects

브라우저 호환성

baseline 표시에 따르면 2015년 7월부터 다양한 브라우저에서 널리 사용 가능하다. 호환성 표는 JavaScript를 활성화해야 볼 수 있다.

참고 자료

  • ArrayBuffer의 core-js 폴리필
  • JavaScript typed arrays 가이드
  • SharedArrayBuffer
  • RangeError: invalid array length

더 알아보기