ArrayBuffer & typed arrays

Bytes before arrays

The previous lesson finished the Regular expressions module with regex performance. This first lesson in Binary data & memory switches from text patterns to bytes: file headers, pixels, audio samples, WebGL buffers, compressed data, and protocol packets.

A bit is a single 0 or 1. A byte is eight bits, so it can hold 256 different patterns. When we read a byte as an unsigned number, those patterns are 0 through 255. Hexadecimal is a compact way to write those patterns: 0xff means 255, 0x00 means 0, and 0x89 0x50 0x4e 0x47 is easier to scan than decimal bytes in a file signature.

1const byte = 0b10101010;2console.log(byte);3console.log(byte.toString(16).padStart(2, "0"));4console.log(byte.toString(2).padStart(8, "0"));

Normal arrays from Array basics can grow, hold mixed values, and store references. Typed arrays are dense and numeric. They are how JavaScript talks to browser and platform APIs that already think in bytes. The value rules build on Number & Math in depth and BigInt, but the storage is much closer to the metal.

You cannot use buffer[0] to read an ArrayBuffer. It deliberately has no element type. Create a view, then the same bytes become meaningful. Multiple views can sit on the same buffer, and a write through one view is immediately visible through the others.

1const buffer = new ArrayBuffer(8);Run2const bytes = new Uint8Array(buffer);3bytes.set([0x34, 0x12, 0, 0]);4const words = new Uint16Array(buffer);5console.log(words[0].toString(16));6words[1] = 0x7fff;7console.log(Array.from(bytes.slice(2, 4)).join(" "));8const view = new DataView(buffer);9view.setInt8(4, -1);10console.log(bytes[4]);11console.log(ArrayBuffer.isView(view));

The step-through uses Uint16Array to show shared memory, so the byte order for multi-byte typed-array elements follows the platform. Today that is almost always little-endian. When a file format or protocol says exactly which byte comes first, use DataView and pass the endian flag explicitly.

1const buffer = new ArrayBuffer(8);2const bytes = new Uint8Array(buffer);3bytes.set([0x78, 0x56, 0x34, 0x12, 0xff, 0x00, 0x80, 0x3f]);4const view = new DataView(buffer);5console.log(view.getUint32(0, true).toString(16));6console.log(view.getUint32(0, false).toString(16));7console.log(new Float32Array(buffer, 4, 1)[0]);

The typed array family: ranges, overflow and rounding

Every typed array constructor chooses three things: element size, value type, and conversion behavior. Integer typed arrays store a fixed number of bits. When a Number does not fit, ordinary integer typed arrays wrap modulo the element size. Floating arrays round to their precision. Uint8ClampedArray is the exception designed for pixels: it clamps into 0–255 instead of wrapping.

1const signed = new Int8Array([127, 128, 129, -129]);2const unsigned = new Uint8Array([255, 256, 257, -1]);3const pixels = new Uint8ClampedArray([-20, 12.5, 13.5, 255.4, 300]);4const floats = new Float32Array([Math.PI, 1 / 3, 1e40]);5const bigs = new BigInt64Array([1n, -2n]);6console.log(Array.from(signed).join(","));7console.log(Array.from(unsigned).join(","));8console.log(Array.from(pixels).join(","));9console.log(Array.from(floats).join(","));10console.log(Array.from(bigs).join(","));

1const Float16 = globalThis.Float16Array;2if (typeof Float16 === "function") {3  const values = new Float16([1, 1 / 3, 65504, 1e-8]);4  console.log(Array.from(values).join(","));5} else {6  console.log("Float16Array not supported here");7}

Endianness answers: when a number uses several bytes, which byte comes first? Big-endian writes the most significant byte first. Little-endian writes the least significant byte first. CPU and typed-array native order is almost always little-endian today, but binary formats are not all the same.

DataView is the safest parser for structured binary data because every operation names a byte offset and, for multi-byte values, a little-endian boolean. Omit the boolean or pass false for big-endian. Pass true for little-endian.

1const buffer = new ArrayBuffer(4);Run2const view = new DataView(buffer);3view.setUint32(0, 0x12345678, false);4console.log(Array.from(new Uint8Array(buffer)).map((byte) => byte.toString(16).padStart(2, "0")).join(" "));5console.log(view.getUint32(0, false).toString(16));6console.log(view.getUint32(0, true).toString(16));

1const buffer = new ArrayBuffer(4);2const view = new DataView(buffer);3view.setUint32(0, 0x12345678, false);4console.log(Array.from(new Uint8Array(buffer)).map((byte) => byte.toString(16).padStart(2, "0")).join(" "));5console.log(view.getUint32(0, false).toString(16));6console.log(view.getUint32(0, true).toString(16));

subarray, slice, set and ArrayBuffer.isView

Typed arrays look array-like, but the memory rules matter. subarray(start, end) creates a new view into the same buffer. slice(start, end) copies bytes into a new typed array. set(source, offset) bulk-copies values into an existing typed array, and ArrayBuffer.isView(value) tells you whether a value is a typed array or a DataView.

1const bytes = new Uint8Array([1, 2, 3, 4]);2const shared = bytes.subarray(1, 3);3const copied = bytes.slice(1, 3);4shared[0] = 99;5console.log(bytes.join(","));6console.log(copied.join(","));7bytes.set([7, 8], 2);8console.log(bytes.join(","));9console.log(ArrayBuffer.isView(shared));10console.log(ArrayBuffer.isView(bytes.buffer));

Real files, pixels, WebGL and audio buffers

Binary APIs usually start by giving you an ArrayBuffer. Files and blobs use Blob.arrayBuffer(). fetch() responses have arrayBuffer(). Canvas ImageData stores pixels in a Uint8ClampedArray. WebGL, WebGPU, Web Audio, compression libraries, and WebAssembly all use typed arrays because they are dense, predictable, and cheap to hand to native code.

PNG files start with an eight-byte signature. The IHDR chunk stores width at byte offset 16 and height at byte offset 20, both as big-endian unsigned 32-bit integers. That makes it a perfect DataView example.

1const png = new Uint8Array([2  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,3  0x00, 0x00, 0x00, 0x0d,4  0x49, 0x48, 0x44, 0x52,5  0x00, 0x00, 0x03, 0x20,6  0x00, 0x00, 0x02, 0x58,7]);8const view = new DataView(png.buffer, png.byteOffset, png.byteLength);9const signatureOk = png.slice(0, 8).join(" ") === "137 80 78 71 13 10 26 10";10const width = view.getUint32(16, false);11const height = view.getUint32(20, false);12console.log(signatureOk);13console.log(width + "x" + height);

1async function readPngSize(file) {2  const header = new Uint8Array(await file.slice(0, 24).arrayBuffer());3  const view = new DataView(header.buffer, header.byteOffset, header.byteLength);4  const signature = header.slice(0, 8).join(" ");5  if (signature !== "137 80 78 71 13 10 26 10") throw new Error("Not a PNG");6  return {7    width: view.getUint32(16, false),8    height: view.getUint32(20, false),9  };10}

Resizable and transferable buffers

Modern ArrayBuffer can be created with maxByteLength. If supported, resize(newByteLength) changes the current size up to that maximum. Views with an explicit length are fixed-length; views created without a length can track the buffer as it grows and shrinks.

1const buffer = new ArrayBuffer(4, { maxByteLength: 8 });2const fixed = new Uint8Array(buffer, 0, 4);3const tracking = new Uint8Array(buffer);4buffer.resize(6);5console.log(fixed.length);6console.log(tracking.length);7buffer.resize(2);8console.log(fixed.length);9console.log(tracking.length);

Transfer is about ownership, not sharing. buffer.transfer() moves the bytes into a new buffer and detaches the old one. transferToFixedLength() does the same but guarantees the destination is not resizable. A detached buffer reports byteLength as 0 and its old views can no longer read useful bytes.

1const buffer = new ArrayBuffer(1024);2const moved = buffer.transfer();3console.log(buffer.byteLength);4console.log(moved.byteLength);5const fixed = moved.transferToFixedLength();6console.log(fixed.resizable);

Common misconceptions

Practice exercises

const signed = new Int8Array([127, 128, 129, -129]);
const clamped = new Uint8ClampedArray([-1, 12.5, 13.5, 300]);
console.log(Array.from(signed).join(","));
console.log(Array.from(clamped).join(","));

const signed = new Int8Array([127, 128, 129, -129]);
const clamped = new Uint8ClampedArray([-1, 12.5, 13.5, 300]);
console.log(Array.from(signed).join(","));
console.log(Array.from(clamped).join(","));

const png = new Uint8Array([
  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
  0x00, 0x00, 0x00, 0x0d,
  0x49, 0x48, 0x44, 0x52,
  0x00, 0x00, 0x03, 0x20,
  0x00, 0x00, 0x02, 0x58,
]);
const view = new DataView(png.buffer, png.byteOffset, png.byteLength);
const signatureOk = png.slice(0, 8).join(" ") === "137 80 78 71 13 10 26 10";
const width = view.getUint32(16, false);
const height = view.getUint32(20, false);
console.log(signatureOk);
console.log(width + "x" + height);

const png = new Uint8Array([
  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
  0x00, 0x00, 0x00, 0x0d,
  0x49, 0x48, 0x44, 0x52,
  0x00, 0x00, 0x03, 0x20,
  0x00, 0x00, 0x02, 0x58,
]);
const view = new DataView(png.buffer, png.byteOffset, png.byteLength);
const signatureOk = png.slice(0, 8).join(" ") === "137 80 78 71 13 10 26 10";
const width = view.getUint32(16, false);
const height = view.getUint32(20, false);
console.log(signatureOk);
console.log(width + "x" + height);

const bytes = new Uint8Array([1, 2, 3, 4]);
const shared = bytes.subarray(1, 3);
const copy = bytes.slice(1, 3);
shared[0] = 99;
console.log(bytes.join(","));
console.log(copy.join(","));

const bytes = new Uint8Array([1, 2, 3, 4]);
const shared = bytes.subarray(1, 3);
const copy = bytes.slice(1, 3);
shared[0] = 99;
console.log(bytes.join(","));
console.log(copy.join(","));

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 0x12345678, false);
console.log(view.getUint32(0, false).toString(16));
console.log(view.getUint32(0, true).toString(16));

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint32(0, 0x12345678, false);
console.log(view.getUint32(0, false).toString(16));
console.log(view.getUint32(0, true).toString(16));

const ids = new BigUint64Array([2n ** 63n]);
console.log(ids[0] === 9223372036854775808n);

const ids = new BigUint64Array([2n ** 63n]);
console.log(ids[0] === 9223372036854775808n);

Check your understanding

Key takeaways

• A byte is eight bits: an unsigned byte reads as 0–255, often written with two hex digits.
• ArrayBuffer stores raw memory; typed arrays and DataView interpret it.
• Integer typed arrays wrap, Uint8ClampedArray clamps and rounds for pixels, floats round to their precision, and BigInt arrays require BigInt values.
• Use DataView for explicit offsets and endian order in binary formats.
• subarray shares, slice copies, set bulk-copies, and ArrayBuffer.isView detects typed-array/DataView views.
• Resizable buffers, transfer, worker transfer lists, and SharedArrayBuffer are about ownership and memory lifetime as much as bytes.

Up next: Text encoding & Base64, where these same bytes become strings and encoded text.