ArrayBuffer에 대한 단상

ArrayBuffer - JavaScript | MDN

MDN 문서를 보면 ArrayBuffer는 고정 길이 원시 이진 데이터 버퍼라고 정의되어 있다. 고정 길이라고 하니, 크기를 동적으로 변경할 수 없는 배열 형태의 데이터라는 말이다. 원시 이진이라는 말에서 풍겨지는 것은 성능에 최적화되어 있는 메모리 상의 연속되어 구성된 값이라는 의미일 듯 하다.

자바스크립트에는 Array라는 타입이 있는데, 이것은 동적으로 값을 늘릴 수도, 지울 수도 있다. C++ 에서 vector와 array와의 관계가 아닐까 생각해본다. 전자는 Array, 후자는 ArrayBuffer와 연관된다.

그러나, ArrayBuffer는 직접 수정하는 것은 불가능하고, 형식화배열이나 DataView를 통해 수정을 해야 한다. 이 내용은 간단히 확인해볼 수 있다.

ArrayBuffer {
  [Uint8Contents]: <00 00 00 00 00 00 00 00 00 00>,
  byteLength: 10
}
ArrayBuffer {
  [Uint8Contents]: <00 00 00 00 00 00 00 00 00 00>,
  byteLength: 10,
  '2': 2
}
ArrayBuffer {
  [Uint8Contents]: <00 00 02 00 00 00 00 00 00 00>,
  byteLength: 10,
  '2': 2
}
ArrayBuffer {
  [Uint8Contents]: <00 00 02 03 00 00 00 00 00 00>,
  byteLength: 10,
  '2': 2
}

결과를 보면 ArrayBuffer에 대해서는 배열로 접근해서 값을 변경을 시도해도 ‘2’ 라는 키로 새로운 값이 생성되어 버린다. 형식화배열이나 DataView 로 수정을 시도했을 때는 실제 ArrayBuffer 의 내용이 바뀌었음을 알 수 있다.