Typed Arrays & ArrayBuffer

Also Known As

TL;DR

Explanation

ArrayBuffer is raw binary memory. TypedArray views interpret that memory as specific numeric types: Uint8Array (bytes), Int32Array (32-bit signed integers), Float64Array (64-bit floats), etc. DataView allows mixed-type reads at arbitrary offsets. Use cases: WebGL vertex buffers, Web Audio API, FileReader binary output, WebSocket binary frames, and Transferable objects for zero-copy Worker message passing. Unlike regular arrays, Typed Arrays are fixed-length with homogeneous types — much more memory-efficient for large numeric datasets.

Common Misconception

Why It Matters

Common Mistakes

• Creating a new ArrayBuffer for each small write in a loop — pre-allocate a large buffer.
• Mixing up endianness when reading multi-byte values — use DataView with explicit endianness.
• Not transferring ArrayBuffers to Workers — transferring moves ownership (zero-copy); cloning copies.
• Forgetting that TypedArray.from() creates a copy, not a view.

Code Examples

// Regular array for binary protocol — slow and wasteful:
const packet = [0x01, 0x00, 0x00, 0x00, 255, 128, 64];
// Array of boxed numbers — 7 heap objects, ~280 bytes
webSocket.send(packet); // Must convert before sending

// Typed array — raw memory, fast, transferable:
const buffer = new ArrayBuffer(7);
const view = new DataView(buffer);
view.setUint32(0, 1, true);  // Little-endian uint32 at offset 0
view.setUint8(4, 255);
view.setUint8(5, 128);
view.setUint8(6, 64);
webSocket.send(buffer);  // Zero-copy binary send

// Send to Worker without copying:
worker.postMessage({ buffer }, [buffer]); // Transfer — buffer detached here

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Typed_arrays

Tags

Related Terms