TypedArrays & ArrayBuffers0%
WeakMap & WeakSet for Memory Management

TypedArrays & ArrayBuffers

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

TypedArrays & ArrayBuffers in Modern JavaScript

Standard JavaScript arrays are dynamic, hash-like objects capable of holding heterogeneous types. While flexible, they carry substantial memory overhead and cannot directly interface with raw binary hardware protocols, WebGL shaders, audio streams, or WebAssembly. ArrayBuffer and TypedArrays provide fast, fixed-size, low-level binary memory management.

1. ArrayBuffer: The Raw Memory Slab

An ArrayBuffer represents a fixed-length contiguous block of raw binary memory:

JavaScript
// Allocate a 16-byte memory block (initialized with zeros)
const buffer = new ArrayBuffer(16);
 
console.log('Buffer byte length:', buffer.byteLength); // 16
Crucial Rule: You cannot directly read or write to an ArrayBuffer directly! You must access it through a View—either a TypedArray or a DataView.

2. TypedArray Views

A TypedArray interprets the underlying buffer as an array of elements of a specific numerical type:

Output
Raw ArrayBuffer (16 Bytes)
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
│ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │ 10│ 11│ 12│ 13│ 14│ 15│
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘
▲ ▲ ▲ ▲
│ Int32 (4 bytes) │ Int32 (4 bytes) │ Int32 (4 bytes) │ Int32 (4 bytes)
TypedArrayElement TypeBytes per ElementValue Range
Int8Array8-bit Signed Int1-128 to 127
Uint8Array8-bit Unsigned Int10 to 255
Uint8ClampedArray8-bit Clamped Int10 to 255 (Clamps overflow, Canvas/Image data)
Int16Array16-bit Signed Int2-32,768 to 32,767
Int32Array32-bit Signed Int4-2,147,483,648 to 2,147,483,647
Float32Array32-bit Float4IEEE 754 floating point (WebGL vectors)
Float64Array64-bit Float8Standard JS Number precision
JavaScript
const buffer = new ArrayBuffer(8); // 8 bytes
 
// View buffer as two 32-bit integers:
const int32View = new Int32Array(buffer);
int32View[0] = 42;
int32View[1] = 1000;
 
console.log(int32View.length); // 2 elements

3. DataView & Endianness (Byte Ordering)

When parsing binary file formats (e.g. PNG headers, MP3 tags) or network packets, different systems store multi-byte numbers in different byte orders (Big-Endian vs Little-Endian). DataView allows heterogeneous reading/writing with explicit endianness control:

JavaScript
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
 
// Write 16-bit int at byte offset 0 in Little-Endian format:
view.setUint16(0, 0x1234, true); // true = little-endian
 
// Read back in Big-Endian:
console.log(view.getUint16(0, false).toString(16)); // "3412" (Bytes swapped!)

4. Subarray vs. Slice (Zero-Copy Sharing)

  • typedArray.subarray(start, end): Creates a new TypedArray view sharing the exact same memory buffer (Zero copy!).
  • typedArray.slice(start, end): Creates a deep copy with a newly allocated buffer.
JavaScript
const original = new Uint8Array([10, 20, 30, 40]);
const sub = original.subarray(1, 3); // Views [20, 30]
 
sub[0] = 99; // Mutates shared buffer!
console.log(original[1]); // 99! (Shared memory)
Interactive Quiz

Practice Quiz

Question 1
What is an ArrayBuffer in JavaScript?
Question 2
Can you directly write values into an ArrayBuffer without using a View?
Question 3
What makes Uint8ClampedArray unique compared to a standard Uint8Array?
Question 4
What is the primary purpose of DataView?
Question 5
How does typedArray.subarray() differ from typedArray.slice()?
Next Lesson

WeakMap & WeakSet for Memory Management

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Proxy & Decorator PatternsWeakMap & WeakSet for Memory Management

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext