An ArrayBuffer is fixed a block of memory, often used to store typed arrays .
On top of this block, you can create different views that interpret the bits as numbers, bytes, or other data types.
Creating an ArrayBuffer
Use new ArrayBuffer() to create a new ArrayBuffer.
Example
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(16);
// Get the length in bytes
let len = myBuf.byteLength;The size of an ArrayBuffer is specified in bytes .
The byteLength property represents the size.
Once created, the size can not be changed.
Accessing an ArrayBuffer
The ArrayBuffer does not have methods to read and write data.
You must always use a view to access the data.
Typed Arrays and DataViews provide a way to read and write numeric values to an ArrayBuffer.
Common typed arrays are
- Uint8Array - 8-bit unsigned integers
- Int16Array - 16-bit signed integers
- Int32Array - 32-bit signed integers
- Float32Array - 32-bit floating point numbers
- Float64Array - 64-bit floating point numbers
Using an Uint8Array
Example
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Create a Uint8Array view
const view = new Uint8Array(myBuf);
// Write max 8 values view[0] = 10; view[2] = 128; view[1] = 255; // Read values
let v0 = view[0];
let v1 = view[1];
let v2 = view[2];Using an Int32Array
Example
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(12);
// Create an Int32Array view
const view = new Int32Array(myBuf);
// 12 bytes = max 3 Int32 values view[0] = 100000; view[1] = 200000; view[2] = 300000; // Read values
let v0 = view[0];
let v1 = view[1];
let v2 = view[2];Using a DataView
A DataView is a more flexible view for an ArrayBuffer.
A DataView lets you read and write values of different types (Int8, Uint16, Float32, etc.).
A DataView also lets you read and write values at any byte offset.
Example: Reading and Writing with DataView
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Create a DataView
const view = new DataView(myBuf);
// Write a 32-bit integer at byte offset 0 view.setInt32(0, 123456); // Write a 16-bit integer at byte offset 4 view.setInt16(4, 32000); // Read the values
let v1 view.getInt32(0);
let v2 = view.getInt16(4);The DataView methods have an optional littleEndian parameter (true/false) to control the byte order.
Slicing an ArrayBuffer
You can make a copy of a part of an ArrayBuffer using the slice() method. It returns a new ArrayBuffer with bytes from the specified range.
Example: ArrayBuffer.slice()
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(8);
// Create a Uint8Array
const view = new Uint8Array(myBuf);
// Fill with values 0 to 7
for (let i = 0; i < view.length; i++) {
view[i] = i;
}
// Create a copy of bytes from 2 to 5 (not including 5)
const sliced = myBuf.slice(2, 5);
const slicedView = new Uint8Array(sliced);The slice() method creates a new buffer.
The slice() method does not share memory with the original buffer.
Converting Strings
Example
function stringToArrayBuffer(str) {
const encoder = new TextEncoder();
return encoder.encode(str).buffer;
}
const myBuf = stringToArrayBuffer("Hello");
let len1 = myBuf.byteLength;Example
function arrayBufferToString(buffer) {
const decoder = new TextDecoder();
return decoder.decode(new Uint8Array(buffer));
}
const encoder = new TextEncoder();
const myBuf = encoder.encode("Hello ArrayBuffer").buffer;
let text = arrayBufferToString(myBuf);Sharing ArrayBuffer (SharedArrayBuffer)
An ArrayBuffer is not shared between threads by default.
To share memory between workers, JavaScript provides SharedArrayBuffer .
It behaves like ArrayBuffer , but its contents can be shared and used with Atomics .
Example: Creating a SharedArrayBuffer
if (Window.crossOriginIsolated) {
buffer = new SharedArrayBuffer(16);
} else {
buffer = new ArrayBuffer(16);
}
const sharedView = new Int32Array(buffer);
buffer[0] = 42;
let numb = sharedView[0];Browsers may require special security headers to enable SharedArrayBuffer (COOP/COEP).
Summary
- ArrayBuffer is a low-level object representing a fixed-size block of memory
- You cannot read or write directly to an ArrayBuffer
- You use views (typed arrays or DataView) to access an ArrayBuffer
- Typed arrays are good for uniform numeric data
- DataView is good for mixed or structured data
- Use slice() to copy parts of an ArrayBuffer
- Use a SharedArrayBuffer and Atomics for shared-memory concurrency
Common Use Cases
- Working with binary data from files (e.g., images, videos, audio).
- Handling binary network protocols (WebSockets, WebRTC, etc.).
- Performing performance-critical numeric computations.
- Interoperability with WebAssembly or other low-level APIs.
Common Views
| View | Description | Bytes |
|---|---|---|
| Int8Array | 8-bit signed integer | 1 |
| Uint8Array | 8-bit unsigned integer | 1 |
| Uint8ClampedArray | 8-bit clamped integer | 1 |
| Int16Array | 16-bit signed integer | 2 |
| Uint16Array | 16-bit unsigned integer | 2 |
| Int32Array | 32-bit signed integer | 4 |
| Uint32Array | 32-bit unsigned integer | 4 |
| Float32Array | 32-bit floating point | 4 |
| Float64Array | 64-bit floating point | 8 |
| DataView | Generic view (all types) |
Learn More
Typed Array Methods
Typed Array Reference
DataViews
Atomics