Curriculum
Module 34 // Core JavaScript
Typed Arrays & Binary Data
Module Objective
ArrayBuffer, DataView, typed array views
Mental Model Realtime Simulation
INTERACTIVE_CANVASEditor_Pane
Loading...
Console_Output
Waiting for output...
Practical Code Examples
// Example 1
// 1. Efficient Fixed-Type Storage
const pixelData = new Uint8ClampedArray(4); // RGBA
pixelData[0] = 255; // Red
pixelData[1] = 0; // Green
pixelData[2] = 0; // Blue
pixelData[3] = 255; // Alpha
console.log(pixelData); // [255, 0, 0, 255]💡 Unlike regular arrays, Typed Arrays only store one type of data (e.g., unsigned 8-bit integers). This allows the CPU to process them much faster.
// Example 2
// 2. Multiple Views on One Buffer
const buf = new ArrayBuffer(4);
const view1 = new Uint8Array(buf);
const view2 = new Uint16Array(buf);
view1[0] = 255;
view1[1] = 1;
console.log(view2[0]); // 511 (The binary result of 255 + 1<<8)💡 You can point different 'Views' at the same raw memory buffer. Changing one view automatically changes the others because they are looking at the same bytes.
// Example 3
// 3. Overflow Behavior
const tiny = new Uint8Array(1);
tiny[0] = 256;
console.log(tiny[0]); // 0 (It wrapped around!)💡 Typed Arrays have strict bounds. If you try to store a number larger than the type allows (e.g., >255 for Uint8), it 'wraps around' (modulo math).
Engine & Memory Architecture
The Raw Metal
1. Contiguous Allocation:
- Regular Arrays are objects in the Heap and can be fragmented.
- Typed Arrays allocate a single contiguous block of memory in the RAM.
2. CPU Cache Locality:
- Because the data is sequential and fixed-size, the CPU can load it into its L1 Cache much more efficiently.
- This results in O(1) access time that is significantly faster than standard JS arrays.
3. Zero-Copy:
ArrayBufferdata can be passed between the Main Thread and Web Workers using "Transferables."- This moves the memory ownership without copying the bytes, saving RAM and avoiding main-thread blocking.