TypedArray

Added in ves6 · Updated March 16, 2026 · Built-in Objects

javascript typedarray es6 binary arraybuffer

A TypedArray describes a view of an ArrayBuffer that allows reading and writing binary data in specific formats. Instead of storing arbitrary JavaScript values, typed arrays store elements as raw binary numbers, making them much more efficient for numerical operations.

Creating a TypedArray

TypedArrays require an ArrayBuffer as their backing store:

// Create an 8-byte buffer
const buffer = new ArrayBuffer(8);

// Create an Int32Array view into the buffer
const int32View = new Int32Array(buffer);
// 4 integers (8 bytes / 4 bytes per int32)

const uint8View = new Uint8Array(buffer);
// 8 bytes (8 bytes / 1 byte per uint8)

You can also create a TypedArray directly with a length:

const float64 = new Float64Array(4);
// Creates a 32-byte buffer (4 × 8 bytes)
// Contains 4 elements, all initially 0

TypedArray Types

Different typed arrays handle different number types:

Type	Size	Range
Int8Array	1 byte	-128 to 127
Uint8Array	1 byte	0 to 255
Int16Array	2 bytes	-32,768 to 32,767
Uint16Array	2 bytes	0 to 65,535
Int32Array	4 bytes	-2,147,483,648 to 2,147,483,647
Uint32Array	4 bytes	0 to 4,294,967,295
Float32Array	4 bytes	1.2e-38 to 3.4e38
Float64Array	8 bytes	5e-324 to 1.8e308
Uint8ClampedArray	1 byte	0 to 255 (clamped)

The Uint8ClampedArray is special — values outside 0-255 are clamped rather than wrapping:

const clamped = new Uint8ClampedArray(2);
clamped[0] = 200;
clamped[1] = 300;  // Becomes 255, not 44
clamped           // Uint8ClampedArray [200, 255]

Accessing and Modifying Elements

Access elements using bracket notation:

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

view[0] = 1000;
view[1] = -500;

view[0]   // 1000
view[1]   // -500
view[2]   // 0 (unitialized)

The shared buffer means changes in one view affect others:

const buffer = new ArrayBuffer(4);
const int16 = new Int16Array(buffer);
const uint8 = new Uint8Array(buffer);

int16[0] = 0x0102;  // 258 in decimal
uint8[0]   // 2 (low byte)
uint8[1]   // 1 (high byte)

Properties and Methods

TypedArrays share many methods with regular arrays:

const nums = new Int8Array([1, 2, 3, 4, 5]);

nums.length              // 5
nums.byteLength          // 5 (bytes)
nums.buffer              // The underlying ArrayBuffer
nums.entries()           // Iterator of [index, value]
nums.keys()              // Iterator of indices
nums.values()            // Iterator of values

nums.slice(1, 3)         // New Int8Array [2, 3]
nums.set([10, 20], 1)    // Now [1, 10, 20, 4, 5]
nums.subarray(1, 3)      // View into [10, 20]

Practical Examples

Reading Binary File Headers

// Imagine reading an 8-byte header
const headerBytes = new Uint8Array([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]);

// Read as big-endian 32-bit values
const dataView = new DataView(headerBytes.buffer);
const magic = dataView.getUint32(0, false);  // false = big-endian
// 0x89504E47 (PNG magic number)

Image Pixel Manipulation

// A tiny 2x2 RGBA image (16 bytes)
const rgba = new Uint8ClampedArray([
  255, 0, 0, 255,     // Red
  0, 255, 0, 255,     // Green
  0, 0, 255, 255,     // Blue
  255, 255, 0, 255    // Yellow
]);

// Calculate average red value
let totalRed = 0;
for (let i = 0; i < rgba.length; i += 4) {
  totalRed += rgba[i];
}
const avgRed = totalRed / 4;
// 63

Audio Sample Processing

// 16-bit mono audio samples
const samples = new Int16Array(1000);

// Normalize by finding peak
let peak = 0;
for (let i = 0; i < samples.length; i++) {
  peak = Math.max(peak, Math.abs(samples[i]));
}

const scale = 32767 / peak;
// Scale all samples to use full range
for (let i = 0; i < samples.length; i++) {
  samples[i] = samples[i] * scale;
}

Endianness

TypedArrays use the platform’s native byte order by default. Use DataView for explicit control:

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

typed[0] = 1;
// On little-endian: bytes are [1, 0, 0, 0]
// On big-endian: bytes are [0, 0, 0, 1]

view.getUint32(0, true)   // 1 (little-endian)
view.getUint32(0, false)  // 16777216 (big-endian)