Typed Arrays

You will be able to create JavaScript typed arrays, store fixed numeric values in them, and choose them over ordinary arrays when performance and binary data layout matter.

What it is

A typed array is a fixed-length, numeric array whose elements are stored in a specific binary format. It is a view over an ArrayBuffer, which is the raw block of memory. The view decides how each byte is interpreted: as 8-bit integers, 32-bit floats, and so on.

Common typed array constructors include Uint8Array, Int16Array, Int32Array, Float32Array, and Float64Array. Related terms are ArrayBuffer, DataView, and typed array views.

Why it matters

• They store raw numeric data compactly, which is useful for images, audio samples, sensor readings, and 3D geometry.
• They avoid the overhead of ordinary JavaScript arrays when every element has the same numeric type.
• They are required by many browser APIs, such as WebGL, Web Audio, and WebAssembly memory access.
• They make binary data layout explicit, so you can reason about memory size and numeric precision.

Syntax or steps

const f = new Float32Array(3);
const u = new Uint8Array([255, 128, 0]);
const buffer = new ArrayBuffer(12);
const view = new Float32Array(buffer);
const copy = Float32Array.from([1.5, 2.5, 3.5]);

The first line creates a Float32Array with three elements, all initialized to 0. The second creates a typed array from an iterable. The third and fourth create a raw buffer and then a typed view over it. The fifth copies values from a normal array.

Example

const pixels = new Uint8Array([255, 128, 0, 255]);

const red = pixels[0];
const green = pixels[1];
const blue = pixels[2];
const alpha = pixels[3];

const brightness = (red + green + blue) / 3;

console.log({ red, green, blue, alpha, brightness });

This example stores four RGBA color channels in one Uint8Array. Each channel is an unsigned 8-bit integer, so valid values are 0 through 255. The code reads each channel by index, computes a simple average brightness, and logs the result. Because the array has fixed length, it cannot grow or shrink after creation.

Common mistakes

• Calling push() or pop(). Typed arrays have fixed length and do not have these methods. Use a normal array for dynamic growth, then convert with Uint8Array.from().
• Ignoring overflow. Assigning 300 to a Uint8Array stores 44, because the value wraps modulo 256. Validate or clamp values before storing them.
• Assuming all float arrays have double precision. Float32Array uses 32-bit floats; use Float64Array when you need JavaScript's normal number precision.
• Sharing an ArrayBuffer accidentally. Multiple views can write to the same memory. Use slice() or create a new typed array when you need an independent copy.

When to use it

Practice

Guided exercise: create a Uint8Array with three scores, set them to 90, 80, and 70, then use reduce() to compute the total.

const scores = new Uint8Array(3);
scores[0] = 90;
scores[1] = 80;
scores[2] = 70;

const total = scores.reduce((sum, value) => sum + value, 0);
console.log(total);

Expected output: 240.

Challenge: create a Uint8Array from [10, 20, 30], double each value with map(), then keep only values greater than 30 with filter().

Solution hint: typed array methods such as map() and filter() return typed arrays, not ordinary arrays. Expected result: Uint8Array [40, 60].

Quick check

Question: What happens when you assign 300 to index 0 of a Uint8Array?

Answer: It stores 44, because Uint8Array holds unsigned 8-bit integers and wraps values modulo 256.

Summary

Typed arrays are fixed-length numeric views over binary memory. They are best when you need compact, predictable storage for numbers, especially for graphics, audio, and binary protocols.

Use ordinary arrays for mixed or dynamic data, and use typed arrays when the numeric type and memory layout are known in advance.