ArrayBuffer, TypedArrays & Binary Data
10 questions found
What is an ArrayBuffer in JavaScript?
Beginner
An ArrayBuffer is a fixed-length, raw binary data buffer in memory. It has no way to read or write data directly — you need a "view" like a TypedArray or DataView layered on top of it to interpret the bytes as numbers.
const buffer = new ArrayBuffer(16); // 16 bytes of raw memory
console.log(buffer.byteLength); // 16
Real-world example
Used when working with binary file data, WebSocket binary frames, or the Web Audio API.
Common follow-ups: How is an ArrayBuffer different from a regular JS array?
TypedArrays
DataView
What is a TypedArray and how does it relate to ArrayBuffer?
Beginner
A TypedArray (like Int32Array, Uint8Array, Float64Array) is a view that lets you read and write numeric values of a specific type directly into an ArrayBuffer's memory, without copying data.
const buffer = new ArrayBuffer(4);
const view = new Int32Array(buffer);
view[0] = 42;
console.log(view[0]); // 42
Real-world example
Decoding pixel data from a Canvas ImageData object uses a Uint8ClampedArray.
Common follow-ups: Can multiple TypedArrays share the same ArrayBuffer?
ArrayBuffer
DataView
Name a few common TypedArray types and their byte sizes.
Beginner
Int8Array uses 1 byte per element, Int16Array uses 2, Float64Array uses 8. JS also has Uint8Array, Uint16Array, Int32Array, Uint32Array, Float32Array, and BigInt64Array/BigUint64Array for 64-bit integers.
new Int8Array(1).BYTES_PER_ELEMENT; // 1
new Int16Array(1).BYTES_PER_ELEMENT; // 2
new Float64Array(1).BYTES_PER_ELEMENT; // 8
Real-world example
Choosing Uint8Array vs Float64Array matters a lot for memory usage on large binary datasets.
Common follow-ups: What happens if you assign a value outside a TypedArray's range?
Numbers
Math & BigInt
What is a DataView and when would you use it over a TypedArray?
Intermediate
DataView lets you read and write multiple numeric types at arbitrary byte offsets within an ArrayBuffer, and lets you control endianness (byte order). Use it when parsing binary formats with mixed data types, like file headers or network protocols.
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setInt16(0, 300, true); // little-endian
console.log(view.getInt16(0, true)); // 300
Real-world example
Parsing a binary file format like a PNG or WAV header, where fields have different types and sizes.
Common follow-ups: What is endianness and why does it matter?
Networking: Fetch
XHR
WebSockets & CORS
How do you convert a TypedArray to a regular JavaScript array?
Intermediate
Use Array.from() or the spread operator; both iterate the TypedArray and produce a standard Array with full array method support (map, filter, etc.), which TypedArrays only partially share.
const typed = new Uint8Array([1, 2, 3]);
const arr = Array.from(typed);
console.log(arr); // [1, 2, 3]
Real-world example
Converting decoded audio sample data into a regular array before running custom analysis functions.
Common follow-ups: Do TypedArrays support push() and pop()?
Arrays & Array Methods
What's the difference between slice() and subarray() on a TypedArray?
Intermediate
slice() copies the selected elements into a brand-new TypedArray backed by a new buffer. subarray() creates a new TypedArray view over the SAME underlying ArrayBuffer — modifying one affects the other.
const a = new Uint8Array([1,2,3,4]);
const copy = a.slice(0,2); // new buffer
const view = a.subarray(0,2); // shares buffer
view[0] = 99;
console.log(a[0]); // 99
console.log(copy[0]); // 1
Real-world example
subarray() is used to process large binary buffers in chunks without expensive copies.
Common follow-ups: Does this mean subarray() is faster than slice()?
Memory Management & Garbage Collection
How do you share an ArrayBuffer between a Web Worker and the main thread without copying it?
Advanced
Use a SharedArrayBuffer instead of a regular ArrayBuffer, or transfer ownership of a regular ArrayBuffer via postMessage's transfer list, which moves (not copies) the buffer and leaves it unusable on the sender's side.
worker.postMessage(buffer, [buffer]); // transfers, doesn't copy
console.log(buffer.byteLength); // 0 after transfer
Real-world example
Transferring large decoded video frames to a worker for processing without duplicating memory.
Common follow-ups: What extra requirements does SharedArrayBuffer have (COOP/COEP headers)?
Web Workers & Multithreading
How does BigInt64Array differ from a standard numeric TypedArray?
Advanced
BigInt64Array (and BigUint64Array) store 64-bit integers as BigInt values instead of JS Numbers, avoiding the precision loss that happens with regular Numbers beyond 2^53. Reading an element returns a BigInt, not a Number.
const arr = new BigInt64Array(1);
arr[0] = 9007199254740993n;
console.log(arr[0]); // 9007199254740993n
Real-world example
Storing 64-bit timestamps or IDs precisely when interfacing with binary protocols like protobuf.
Common follow-ups: Can you mix BigInt and Number in arithmetic?
Numbers
Math & BigInt
How can you grow an ArrayBuffer after it's been created?
Advanced
Historically ArrayBuffers were fixed-length once allocated, so "growing" one meant allocating a new, larger buffer and copying the old data in. Modern JS (ES2024) added ArrayBuffer.prototype.resize() for buffers created with a maxByteLength option, allowing in-place growth up to that cap.
const buf = new ArrayBuffer(8, { maxByteLength: 32 });
buf.resize(16);
console.log(buf.byteLength); // 16
Real-world example
Growing a binary message buffer incrementally while streaming data from a socket.
Common follow-ups: What's the performance cost of resizing versus pre-allocating?
Memory Management & Garbage Collection
How do you handle out-of-range writes to a TypedArray safely?
Advanced
TypedArrays silently clamp or wrap out-of-range values instead of throwing (except Uint8ClampedArray, which clamps to 0-255). You must validate values yourself before writing if you need strict range enforcement.
const arr = new Uint8Array(1);
arr[0] = 300;
console.log(arr[0]); // 44 (300 % 256)
const clamped = new Uint8ClampedArray(1);
clamped[0] = 300;
console.log(clamped[0]); // 255
Real-world example
Uint8ClampedArray is exactly what Canvas ImageData uses so pixel values never overflow past 255.
Common follow-ups: Why doesn't JavaScript throw a RangeError here like some languages do?
Design Patterns in JavaScript