JavaScript ArrayBuffer
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 a 16-byte ArrayBuffer:
// Create an ArrayBuffer
const myBuf = new ArrayBuffer(16);
// Get the length in bytes
let len = myBuf.byteLength;
Try it Yourself »
Note
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
Each Uint8 uses 1 byte.
// 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];
Try it Yourself »
Using an Int32Array
Example
Each Int32 uses 4 bytes.
// 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];
Try it Yourself »
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);
Try it Yourself »
Note
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);
Try it Yourself »
Note
The slice() method creates a new buffer.
The slice() method does not share memory with the original buffer.
Converting Strings
Example
Converting a String to an ArrayBuffer (UTF-8)
function stringToArrayBuffer(str) {
const encoder = new TextEncoder();
return encoder.encode(str).buffer;
}
const myBuf = stringToArrayBuffer("Hello");
let len1 = myBuf.byteLength;
Try it Yourself »
Example
Converting an ArrayBuffer to a String (UTF-8)
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);
Try it Yourself »
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];
Try it Yourself »
Note
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.
ArrayBuffer Reference
Revised December 2025
| Property / Method | Description |
| new ArrayBuffer() | Creates a new ArrayBuffer |
| arrayBuffer.byteLength | The length of the buffer in bytes |
| arrayBuffer.slice() | Returns a new ArrayBuffer as a copy of a portion of this buffer |
| ArrayBuffer.isView() | Returns true if argument is a view on an ArrayBuffer |
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) |
