Binary data processing
Parsing or constructing binary formats such as protocol messages and file headers.
JavaScript · Class
ArrayBuffer
ArrayBuffer represents raw binary storage as a sequence of bytes. Access its contents through a typed-array view or DataView; it can also be created as resizable and transferred between execution contexts.
How it works
An ArrayBuffer owns a region of raw bytes but does not provide direct element access. Use a typed-array view or DataView to interpret and modify those bytes; optionally create the buffer as resizable and later change its byte length.
Syntax
new ArrayBuffer(byteLength)
new ArrayBuffer(byteLength, options)Parameters
| Name | Type | Description |
|---|---|---|
byteLength | non-negative integer | The initial buffer length in bytes. |
options | object | Optional construction settings, including maxByteLength for a resizable buffer. |
Returns
A new ArrayBuffer object.
Key points
- Use new ArrayBuffer(length) to allocate a fixed-length buffer with the requested byte count.
- Typed arrays and DataView provide the format-specific access layer for an ArrayBuffer.
- Providing maxByteLength when constructing the buffer enables later resizing up to that maximum.
- Call resize(newLength) to change the byte length of a resizable buffer.
Common mistakes
- An ArrayBuffer has no direct element access; use a typed-array view or DataView to read and write its contents.
Example: Create and resize a buffer
const buffer = new ArrayBuffer(4, { maxByteLength: 8 });
const view = new Uint8Array(buffer);
view.set([10, 20, 30, 40]);
buffer.resize(6);
console.log([...new Uint8Array(buffer)]);Creates a resizable buffer, writes bytes through a typed-array view, expands the buffer, and prints the resulting bytes.
When to use it
Cross-context data transfer
Passing byte storage between workers or other execution contexts.
Resizable storage
Managing memory whose required capacity can grow within a known upper bound.
Interview questions
QWhat is an ArrayBuffer, and how do you read its contents?
ArrayBuffer represents raw binary storage as bytes. It does not itself define how those bytes are interpreted, so code uses a typed-array view or DataView for access.
Follow-up: How would you share the same bytes between two numeric interpretations? Create multiple views over the same ArrayBuffer, choosing the element types and offsets needed.
QHow do resizable ArrayBuffers work?
Pass maxByteLength in the constructor options to create a resizable buffer. Its current size can then be changed with resize(), while resizable and maxByteLength report its capabilities and limit.
Follow-up: What happens when a resizable buffer is shortened below a view's range? The view's accessible range is adjusted according to the buffer's new byte length.
QWhat happens when an ArrayBuffer is transferred?
ArrayBuffer is transferable between execution contexts through the structured clone algorithm. Transfer copies the bytes into a new buffer and detaches the original buffer.
Follow-up: How can a fixed-length destination be requested when transferring? Use transferToFixedLength() rather than transfer().
Related
ArrayBuffer.prototype.byteLengthArrayBuffer.prototype.maxByteLengthArrayBuffer.prototype.resizableArrayBuffer.prototype.resize()ArrayBuffer.prototype.slice()ArrayBuffer.prototype.transfer()ArrayBuffer.prototype.transferToFixedLength()ArrayBuffer.isView()