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.

Share

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;

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);

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   The slice() method creates a new buffer.
> The slice() method does not share memory with the original buffer.

---

## Converting Strings

### Example

javascript function stringToArrayBuffer(str) {

const encoder = new TextEncoder();

return encoder.encode(str).buffer;

}

const myBuf = stringToArrayBuffer("Hello");

let len1 = myBuf.byteLength;

### Example

javascript 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

javascript if (Window.crossOriginIsolated) {

buffer = new SharedArrayBuffer(16);

} else {

buffer = new ArrayBuffer(16);

}

const sharedView = new Int32Array(buffer);

buffer[0] = 42;

let numb = sharedView[0]; ```

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

Common Views