Array Buffers

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;

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

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

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

Note: 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];

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

Common Views

Note: Learn More: Typed Array Tutorial Typed Array Methods Typed Array Reference DataViews Atomics