Typed Array Methods

By the end, you can use typed array methods such as set, subarray, slice, fill, and map to read, write, and transform numeric data efficiently.

What it is

A typed array is a fixed-length view over an ArrayBuffer. It stores one numeric type, such as Uint8Array for bytes or Float32Array for samples. Related terms include buffer, view, offset, length, and DataView.

Typed arrays have Array-like methods, but they cannot change length or store arbitrary values. map, filter, and slice return new typed arrays; subarray returns another view into the same buffer.

Why it matters

• Bulk copying: set copies many values from an array or typed array in one call.
• Efficient windows: subarray inspects part of a buffer without allocating a new buffer.
• Numeric transforms: map and filter return typed arrays; reduce returns a single value.
• Binary data work: useful for pixels, audio samples, network packets, and file buffers.

Syntax or steps

The smallest useful pattern is: create a typed array, write data, take a view or copy, then transform.

const view = new Uint8Array(length);
view.set(source, targetOffset);
const window = view.subarray(start, end);
const copy = view.slice(start, end);

set writes into an existing typed array. The offset defaults to 0. subarray returns a view; slice returns a copy. Both use start and optional exclusive end.

Example

const packet = new Uint8Array(8);
packet.set([10, 20, 30, 40, 50, 60, 70, 80]);

const payload = packet.subarray(2, 6);
const cleaned = payload.map((byte) => byte & 0x0f);

const copy = new Uint8Array(4);
copy.set(cleaned);

console.log(cleaned); // Uint8Array [14, 8, 2, 12]

Part by part:

• new Uint8Array(8) creates eight zero bytes.
• packet.set(...) copies the eight numbers into packet at index 0.
• packet.subarray(2, 6) creates a view of indexes 2 through 5 without copying.
• payload.map(...) creates a new Uint8Array with the low four bits of each byte.
• copy.set(cleaned) copies transformed values into a separate typed array.

Common mistakes

• Writing past the end: set throws RangeError if the source is too long. Allocate more space or shorten the source.
• Confusing subarray and slice: subarray shares memory; slice copies. Use subarray for performance and slice for isolation.
• Assuming exact storage: typed arrays coerce values. Uint8Array wraps values outside 0 to 255. Use the correct type or clamp first.

When to use it

Use typed arrays for numeric bulk work. Use DataView when you need explicit byte-level control, such as reading a 32-bit integer from a protocol.

Practice

Guided exercise: Create a Uint8Array of length 6. Use set to place [1, 2, 3] at offset 2. Then create a subarray from index 2 to 5.

const arr = new Uint8Array(6);
arr.set([1, 2, 3], 2);
const window = arr.subarray(2, 5);
console.log(window); // Uint8Array [1, 2, 3]

Challenge: Copy the first three bytes of window into a new typed array and double each value.

Solution hint: Use window.slice(0, 3) or a new typed array with set, then call map((n) => n * 2).

Quick check

Question: What does arr.set([1, 2, 3]) do?

Answer: It copies the values 1, 2, and 3 into the existing typed array arr, starting at index 0. It does not replace arr with a new array.

Summary

Typed array methods give you a practical way to move, inspect, and transform fixed-size numeric data. The key distinction is between views, such as subarray, and copies, such as slice and map. Choosing the right method helps you balance performance, memory sharing, and data isolation.