Typed Arrays

Working with binary data in JavaScript — ArrayBuffer, Int8Array, Float32Array, DataView, and when to use typed arrays over regular arrays.

What it is, in plain English: A typed array is an array-like view over a raw binary buffer (ArrayBuffer) where every element has the same fixed type and byte width — Int8, Uint8, Int16, Float32, Float64, etc. Unlike regular JavaScript arrays (which can hold any mix of values), typed arrays map directly to memory, making them essential for WebGL, audio processing, binary file formats, network protocols, and any performance-critical numerical work.

When you need to work with raw binary data

Regular JavaScript arrays can hold anything — strings, objects, numbers, mixed types. Typed arrays are different: every element is the same fixed numeric type, stored in raw bytes. You use them when you need to work directly with binary data — reading an image file, sending data over a WebSocket, drawing with WebGL, or processing audio.

The two pieces: ArrayBuffer and a typed view

// ArrayBuffer — the raw bytes (you can't read them directly)
const buffer = new ArrayBuffer(8);   // 8 bytes of memory
console.log(buffer.byteLength);      // 8

// You need a "view" to read/write the bytes:
const view = new Uint8Array(buffer);  // view as 8-bit unsigned integers
view[0] = 255;
view[1] = 127;
console.log(view[0], view[1]);  // 255  127

Available typed array types

Type

Bytes/element

Range

Use case

Int8Array

−128 to 127

Signed bytes

Uint8Array

0 to 255

Raw bytes, image pixels

Uint8ClampedArray

0 to 255 (clamped)

Canvas pixel data

Int16Array

−32768 to 32767

Audio samples

Int32Array

±2 billion

Integer arithmetic

Float32Array

~±3.4×10³⁸

WebGL vertices, 3D

Float64Array

±1.8×10³⁰⁸

Scientific computing

BigInt64Array

64-bit integers

Large integers

Creating typed arrays

// From a length (zeroed memory):
const a = new Float32Array(4);
a[0] = 1.5; a[1] = 2.5;
console.log(a);   // Float32Array [1.5, 2.5, 0, 0]

// From an array of values:
const b = new Int32Array([10, 20, 30, 40]);
console.log(b[2]);  // 30

// From another typed array (copies values):
const c = new Float64Array(b);
console.log(c);   // Float64Array [10, 20, 30, 40]

// Key properties:
console.log(b.length);              // 4
console.log(b.byteLength);          // 16 (4 × 4 bytes)
console.log(b.BYTES_PER_ELEMENT);   // 4

They support most array methods

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

nums.map(x => x * 2);           // Float32Array [2, 4, 6, 8, 10]
nums.filter(x => x > 3);        // Float32Array [4, 5]  ← wait, typed arrays have filter!
nums.reduce((a, b) => a + b);   // 15
nums.forEach(x => console.log(x));
[...nums];                       // [1, 2, 3, 4, 5]  — spread works

// But: no .push(), .pop(), .splice() — fixed size!
// And: .map() returns a typed array of the same type

Try It Yourself

// ArrayBuffer — a raw block of memory
const buffer = new ArrayBuffer(16);  // 16 bytes
console.log(buffer.byteLength);      // 16

// Typed array views over the same buffer:
const int32  = new Int32Array(buffer);   // 4 elements (4 bytes each)
const uint8  = new Uint8Array(buffer);   // 16 elements (1 byte each)

// Same underlying memory — writing to one affects the other:
int32[0] = 256;  // write 256 as a 32-bit integer
console.log(uint8[0], uint8[1], uint8[2], uint8[3]);  // byte layout of 256

// Create typed arrays directly (allocates own buffer):
const floats = new Float32Array(4);
floats[0] = 3.14;
floats[1] = 2.71;
console.log(floats);          // Float32Array [3.14, 2.71, 0, 0]
console.log(floats.length);   // 4
console.log(floats.BYTES_PER_ELEMENT);  // 4

// From existing data:
const ints = new Int32Array([10, 20, 30, 40]);
console.log(ints[2]);   // 30

// Typed arrays support array methods:
const doubled = ints.map(x => x * 2);
console.log([...doubled]);   // [20, 40, 60, 80]
console.log(ints.reduce((a, b) => a + b, 0));  // 100

// DataView — read multi-byte values with explicit endianness:
const dv = new DataView(new ArrayBuffer(8));
dv.setFloat64(0, Math.PI, true);  // little-endian
console.log(dv.getFloat64(0, true));  // 3.141592653589793

DataView, shared buffers, and real-world use

DataView — precise byte-level control

// DataView lets you read/write any type at any byte offset
// with explicit control over byte order (endianness):
const buffer = new ArrayBuffer(12);
const view   = new DataView(buffer);

view.setInt16(0,  0x1234, false);  // big-endian at byte 0
view.setFloat32(2, Math.PI, true); // little-endian at byte 2
view.setUint8(6,  255);            // single byte at offset 6

console.log(view.getInt16(0, false).toString(16));   // "1234"
console.log(view.getFloat32(2, true).toFixed(5));    // "3.14159"
console.log(view.getUint8(6));                       // 255

Multiple views on the same buffer

// Key insight: multiple views share the same underlying bytes
const buffer = new ArrayBuffer(4);
const int32  = new Int32Array(buffer);
const uint8  = new Uint8Array(buffer);

int32[0] = 0x01020304;   // write 4 bytes as one 32-bit integer
// Now read as individual bytes (in little-endian order on most CPUs):
console.log(uint8[0].toString(16));  // "4"
console.log(uint8[1].toString(16));  // "3"
console.log(uint8[2].toString(16));  // "2"
console.log(uint8[3].toString(16));  // "1"

Common real-world uses

// 1. Canvas pixel manipulation:
const canvas = document.createElement("canvas");
const ctx    = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;   // Uint8ClampedArray — RGBA per pixel
for (let i = 0; i < pixels.length; i += 4) {
  pixels[i]     = 255 - pixels[i];    // invert R
  pixels[i + 1] = 255 - pixels[i+1]; // invert G
  pixels[i + 2] = 255 - pixels[i+2]; // invert B
  // pixels[i+3] = alpha (unchanged)
}
ctx.putImageData(imageData, 0, 0);

// 2. WebGL vertices (x,y,z per vertex):
const vertices = new Float32Array([
  0.0,  0.5, 0.0,   // vertex 1
 -0.5, -0.5, 0.0,   // vertex 2
  0.5, -0.5, 0.0,   // vertex 3
]);
// gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 3. Reading a binary file header:
async function readBMPHeader(file) {
  const buffer = await file.arrayBuffer();
  const view   = new DataView(buffer);
  return {
    signature: String.fromCharCode(view.getUint8(0), view.getUint8(1)),
    fileSize:  view.getUint32(2, true),
    width:     view.getInt32(18, true),
    height:    view.getInt32(22, true),
  };
}

SharedArrayBuffer, Atomics, and spec internals

SharedArrayBuffer — shared memory between threads

// SharedArrayBuffer can be shared between a Worker and the main thread:
const shared = new SharedArrayBuffer(4);
const view   = new Int32Array(shared);

// In a Worker:
// const workerView = new Int32Array(shared);
// workerView[0] = 42;  // main thread sees this immediately

// Requires: COOP + COEP headers (cross-origin isolation) for security:

Atomics — thread-safe operations

// Without Atomics, concurrent reads/writes cause data races.
// Atomics operations are guaranteed atomic (indivisible):
const shared = new SharedArrayBuffer(4);
const arr    = new Int32Array(shared);

Atomics.store(arr, 0, 42);         // atomic write
Atomics.load(arr, 0);              // atomic read → 42
Atomics.add(arr, 0, 8);            // atomic add → 50
Atomics.compareExchange(arr, 0, 50, 99);  // CAS: if arr[0]===50, set to 99

// Atomics.wait / Atomics.notify — mutex/semaphore pattern:
// Atomics.wait(arr, 0, 0);   // block until arr[0] ≠ 0 (Worker thread)
// Atomics.notify(arr, 0, 1); // wake up one waiting thread (main thread)

TypedArray in the spec (ECMA-262 §23.2)

TypedArrays share a common abstract supertype %TypedArray% with 13 concrete subtypes. Each subtype has an associated [[TypedArrayName]], [[ElementType]], and [[ElementSize]] internal slot. The underlying memory is an ArrayBuffer with [[ArrayBufferData]] (a byte-level data block) and [[ArrayBufferByteLength]]. The typed array view maintains [[ByteOffset]] and [[ArrayLength]] to locate its slice within the buffer. All integer typed array operations use ToIndex (§7.1.22) for index normalisation.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.