10 questions foundAn 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); // 16Real-world example Used when working with binary file data, WebSocket binary frames, or the Web Audio API.TypedArrays DataViewA 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]); // 42Real-world example Decoding pixel data from a Canvas ImageData object uses a Uint8ClampedArray.ArrayBuffer DataViewInt8Array 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; // 8Real-world example Choosing Uint8Array vs Float64Array matters a lot for memory usage on large binary datasets.Numbers Math & BigIntDataView 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)); // 300Real-world example Parsing a binary file format like a PNG or WAV header, where fields have different types and sizes.Networking: Fetch XHR WebSockets & CORSUse 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.Arrays & Array Methodsslice() 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]); // 1Real-world example subarray() is used to process large binary buffers in chunks without expensive copies.Memory Management & Garbage CollectionHow 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 transferReal-world example Transferring large decoded video frames to a worker for processing without duplicating memory.Web Workers & MultithreadingBigInt64Array (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]); // 9007199254740993nReal-world example Storing 64-bit timestamps or IDs precisely when interfacing with binary protocols like protobuf.Numbers Math & BigIntHistorically 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); // 16Real-world example Growing a binary message buffer incrementally while streaming data from a socket.Memory Management & Garbage CollectionTypedArrays 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]); // 255Real-world example Uint8ClampedArray is exactly what Canvas ImageData uses so pixel values never overflow past 255.Design Patterns in JavaScript