Understanding JavaScript TypedArrays and Binary Data

JavaScript TypedArrays are specialized, array-like objects designed to allocate, read, and manipulate raw binary data directly in memory with high performance. Unlike standard JavaScript arrays, which are dynamic and can hold mixed data types, TypedArrays provide fixed-length buffers containing specific numeric types such as 8-bit integers or 32-bit floating-point numbers. This article explains the underlying architecture of TypedArrays, how they interact with ArrayBuffer and DataView, and how they are used to handle binary data in modern web applications.

The Architecture: Buffers and Views

TypedArrays do not store data directly in the array object itself; instead, they operate through a two-part architecture consisting of a buffer and a view.

1. ArrayBuffer

The ArrayBuffer is the foundational object representing a fixed-length chunk of raw binary memory. It cannot be read or modified directly.

// Allocate 16 bytes of memory
const buffer = new ArrayBuffer(16);

2. TypedArray Views

To read or write data inside an ArrayBuffer, you create a TypedArray view. The view interprets the raw bytes as specific data types.

Common TypedArray constructors include: * Int8Array / Uint8Array: 8-bit signed / unsigned integers (1 byte per element) * Uint8ClampedArray: 8-bit unsigned integers clamped between 0 and 255 (commonly used in HTML Canvas) * Int16Array / Uint16Array: 16-bit signed / unsigned integers (2 bytes per element) * Int32Array / Uint32Array: 32-bit signed / unsigned integers (4 bytes per element) * Float32Array: 32-bit IEEE floating-point numbers (4 bytes per element) * Float64Array: 64-bit IEEE floating-point numbers (8 bytes per element) * BigInt64Array / BigUint64Array: 64-bit signed / unsigned integers (8 bytes per element)

How TypedArrays Handle Binary Data

Reading and Writing Data

When a TypedArray view is attached to an ArrayBuffer, changes made to the view directly mutate the underlying buffer. Multiple views can also reference the same buffer, allowing different interpretations of the same binary data.

// Create a 4-byte buffer
const buffer = new ArrayBuffer(4);

// Create an 8-bit unsigned view
const uint8View = new Uint8Array(buffer);
uint8View[0] = 255;
uint8View[1] = 128;

// Create a 16-bit unsigned view over the same buffer
const uint16View = new Uint16Array(buffer);
console.log(uint16View[0]); // Reads the first two 8-bit values as a single 16-bit integer

Endianness and DataView

Standard TypedArrays use the host system’s native byte order (typically Little-Endian). When handling network protocols or file formats that require strict byte order management (such as Big-Endian), JavaScript provides the DataView interface. DataView allows explicit control over endianness when reading or writing binary data.

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

// Write a 16-bit integer in Big-Endian format
view.setUint16(0, 42, false); 

// Read the value back
console.log(view.getUint16(0, false)); // 42

Why TypedArrays Are Used

TypedArrays optimize binary data processing by providing several advantages over standard JavaScript arrays: