JavaScript Notes

JavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array Guide

Master JavaScript Typed Arrays: ArrayBuffer, DataView, Int8Array, Uint8Array, Float32Array, and more. Learn binary data handling, WebGL, WebAudio, File API, and typed array interview Q&A.

Typed Arrays are fixed-length, typed views over raw binary memory buffers. Unlike regular JavaScript arrays (which can hold any type and have dynamic size), Typed Arrays store a single numeric type in contiguous memory — just like arrays in C or C++. This makes them ideal for high-performance numerical work, WebGL, audio processing, and network binary protocols.

💡 Key insight: A Typed Array is a view over an ArrayBuffer (raw bytes). You can have multiple different typed views over the same buffer — like reading the same byte sequence as integers *and* floats.

The Architecture

Example

ArrayBuffer: [raw bytes in memory] 0x00 0x00 0x00 0x00 0xFF 0xFF 0x00 0x01 ... │ ├── Int8Array view (1 byte per element) ├── Int16Array view (2 bytes per element) ├── Int32Array view (4 bytes per element) ├── Float32Array view (4 bytes per element) ├── Float64Array view (8 bytes per element) └── DataView (manual control)

Available Typed Array Types

Constructor	Bytes	Range
`Int8Array`	1	-128 to 127
`Uint8Array`	1	0 to 255
`Uint8ClampedArray`	1	0–255 (clamps, doesn't wrap)
`Int16Array`	2	-32768 to 32767
`Uint16Array`	2	0 to 65535
`Int32Array`	4	-2^31 to 2^31 - 1
`Uint32Array`	4	0 to 2^32 - 1
`Float32Array`	4	±3.4e38 (single precision)
`Float64Array`	8	±1.8e308 (double precision)
`BigInt64Array`	8	BigInt
`BigUint64Array`	8	BigInt

Creating Typed Arrays

Example

// From a length const bytes = new Uint8Array(4); console.log(bytes); // Uint8Array [0, 0, 0, 0] console.log(bytes.length); // 4 // From an array const ints = new Int32Array([10, 20, 30, 40]); console.log(ints); // Int32Array [10, 20, 30, 40] // From an ArrayBuffer const buffer = new ArrayBuffer(8); // 8 raw bytes const view = new Float64Array(buffer); view[0] = 3.14; console.log(view[0]); // 3.14 console.log(buffer.byteLength); // 8 // From another typed array (converts types) const floats = new Float32Array([1.1, 2.2, 3.3]); const truncated = new Int32Array(floats); console.log(truncated); // Int32Array [1, 2, 3] — decimal truncated

Output

Uint8Array [0, 0, 0, 0]
4
Int32Array [10, 20, 30, 40]
3.14
8
Int32Array [1, 2, 3]

ArrayBuffer — The Raw Bytes

Example

const buffer = new ArrayBuffer(16); // 16-byte buffer console.log(buffer.byteLength); // 16 console.log(buffer instanceof ArrayBuffer); // true // Share one buffer with two different views const int32View = new Int32Array(buffer); // 4 elements (4 bytes each) const uint8View = new Uint8Array(buffer); // 16 elements (1 byte each) int32View[0] = 0x12345678; // write one 32-bit integer console.log(uint8View[0].toString(16)); // "78" — little-endian byte order console.log(uint8View[1].toString(16)); // "56" console.log(uint8View[2].toString(16)); // "34" console.log(uint8View[3].toString(16)); // "12"

Output

16
true
"78"
"56"
"34"
"12"

DataView — Precise Binary Control

DataView allows reading/writing arbitrary types at any byte offset, with explicit endianness control:

js example

const buffer = new ArrayBuffer(12);
const view = new DataView(buffer);

view.setInt32(0, 300, true);       // offset 0, value 300, little-endian
view.setFloat32(4, 3.14, true);    // offset 4, 3.14, little-endian
view.setUint8(8, 255);             // offset 8, 255

console.log(view.getInt32(0, true));    // 300
console.log(view.getFloat32(4, true).toFixed(2));  // "3.14"
console.log(view.getUint8(8));          // 255

Output

300
"3.14"
255

Typed Array Methods

Typed Arrays support most Array methods:

Example

const data = new Float64Array([5.0, 3.0, 8.0, 1.0, 9.0, 2.0]); // Sort (in-place, like Array.sort) data.sort(); console.log(data); // Filter returns a regular Array (not TypedArray) const aboveThree = Array.from(data).filter(n => n > 3); console.log(aboveThree); // map returns regular Array const doubled = Array.from(data).map(n => n * 2); console.log(doubled); // set — copy values into typed array const dest = new Float64Array(6); dest.set([10, 20, 30], 2); // copy at offset 2 console.log(dest); // slice — returns new TypedArray (like Array.slice) const sliced = data.slice(1, 4); console.log(sliced); // subarray — returns a view (no copy!) const sub = data.subarray(1, 4); console.log(sub);

Output

Float64Array [1, 2, 3, 5, 8, 9]
[5, 8, 9]
[2, 4, 6, 10, 16, 18]
Float64Array [0, 0, 10, 20, 30, 0]
Float64Array [2, 3, 5]
Float64Array [2, 3, 5]

Practical: Canvas Pixel Manipulation

Example

const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // imageData.data is a Uint8ClampedArray [R, G, B, A, R, G, B, A, ...] const pixels = imageData.data; for (let i = 0; i < pixels.length; i += 4) { const r = pixels[i]; const g = pixels[i + 1]; const b = pixels[i + 2]; // Convert to greyscale const grey = 0.299 * r + 0.587 * g + 0.114 * b; pixels[i] = pixels[i + 1] = pixels[i + 2] = grey; // pixels[i + 3] = alpha (unchanged) } ctx.putImageData(imageData, 0, 0); console.log("Greyscale filter applied");

Output

"Greyscale filter applied"
// Canvas now shows a greyscale version of the original image

Typed Array vs Regular Array

	Typed Array	Regular Array
Element type	Fixed (e.g., Float32 only)	Any mixed type
Size	Fixed at creation	Dynamic
Memory	Contiguous, C-style	Scattered, boxed
Performance	✅ 10-100x faster for numbers	Slower for raw numbers
Methods	Subset of Array methods	Full Array API
Use case	WebGL, audio, binary protocols, canvas	General purpose

When to Use Typed Arrays

Canvas / image processing — Uint8ClampedArray for pixel RGBA data
WebGL — Float32Array for vertex buffers, Uint16Array for index buffers
Web Audio API — Float32Array for audio sample processing
Binary file parsing — reading binary formats (BMP, WAV, custom protocols)
WebSocket binary messages — processing binary frames
Shared memory — SharedArrayBuffer for cross-worker binary communication

Common Mistakes

Writing out-of-range values — typed arrays truncate, not throw. new Uint8Array([256])[0] is 0 (wraps around), not 256.
Modifying a subarray affects the original — subarray is a view, not a copy. Use slice for an independent copy.
Using filter/map expecting a TypedArray back — these return regular Arrays. Use new TypedArray(array.filter(...)) to get a TypedArray back.
Ignoring endianness in DataView — always specify the endian parameter (true = little-endian) for portable code.

Interview Questions

Q1. What is an ArrayBuffer?

An ArrayBuffer is a fixed-length raw binary data buffer in memory. It cannot be read directly — you must create a Typed Array view or DataView to read/write its contents.

Q2. What is the difference between slice and subarray?

slice(start, end) returns a new TypedArray with copied data — changes to the slice don't affect the original. subarray(start, end) returns a view over the same underlying ArrayBuffer — changes to the subarray affect the original.

Q3. Why are Typed Arrays faster than regular arrays for numeric operations?

Typed Arrays store values as raw binary in contiguous memory — no boxing overhead, no type checking per element. JavaScript engines can use SIMD instructions and optimised loops. Regular arrays store boxed objects that need dereferencing.

Q4. What is Uint8ClampedArray and where is it used?

Uint8ClampedArray is like Uint8Array but instead of wrapping out-of-range values (256 → 0), it clamps them to the nearest boundary (256 → 255, -1 → 0). It's used for pixel data in Canvas (ImageData.data) where you want values to stay in the 0–255 range.

Q5. How do you share an ArrayBuffer between two typed array views?

Pass the same ArrayBuffer to both typed array constructors. Both will read/write the same underlying bytes. Writes through one view are immediately visible through the other.

Q6. What is DataView and when do you need it?

DataView provides fine-grained access to an ArrayBuffer at any byte offset and with explicit endianness. Use it when parsing binary formats where different data types appear at arbitrary offsets, or when endianness control is required.

Q7. What happens when you write a value out of range to a Typed Array?

The value is silently truncated (modulo). new Uint8Array(1)[0] = 300 stores 44 (300 % 256). Uint8ClampedArray clamps instead of wrapping. No error is thrown.

Key Takeaways

Typed Arrays are fixed-length, single-type views over raw ArrayBuffer memory — much faster for numeric work than regular arrays.
Use slice() for a copy; subarray() for a view (shares the same buffer).
DataView gives per-byte control with explicit endianness — essential for binary protocol parsing.
Uint8ClampedArray clamps to 0–255 instead of wrapping — perfect for image pixel data.
Core use cases: Canvas pixel manipulation, WebGL buffers, Web Audio API, binary protocol parsing, SharedArrayBuffer for multi-threading.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, data, structures, typed

Continue learning this concept

Data StructuresDeque (Double-Ended Queue) in JavaScript — Complete GuideLearn the Deque (Double-Ended Queue) data structure in JavaScript. Add and remove from both ends, implement with arrays and classes, explore sliding window use cases, and answer interview questions.Data StructuresLinked List in JavaScript — Nodes, Pointers & Operations GuideMaster the Linked List data structure in JavaScript. Learn singly and doubly linked lists, node creation, insertions, deletions, traversal, and linked list interview questions with code examples.Data StructuresJavaScript Map — Key-Value Data Structure Complete GuideMaster the JavaScript Map data structure. Learn Map vs Object, set/get/has/delete/iteration, any-type keys, insertion order, WeakMap, and Map interview questions with real code examples.Data StructuresJavaScript Numbers — IEEE 754, Precision, and Number Methods GuideMaster JavaScript Numbers: IEEE 754 floating point, precision issues, NaN, Infinity, BigInt, Number methods like toFixed, parseInt, parseFloat, and numeric interview questions with examples.Data StructuresPriority Queue in JavaScript — Min Heap Implementation GuideMaster the Priority Queue data structure in JavaScript using a min-heap. Learn enqueue, dequeue by priority, heap operations, Dijkstra Data StructuresQueue Data Structure in JavaScript — FIFO, Enqueue & Dequeue ExplainedMaster the Queue data structure in JavaScript. Learn FIFO principle, enqueue/dequeue operations, circular queue, priority queue, real-world examples like task scheduling, and interview Q&A.

PreviousStack Data Structure in JavaScript — LIFO, Push, Pop Explained NextJavaScript WeakMap — Weak References, Memory Management Guide