Author
Typed Arrays in JavaScript are array-like objects that provide a way to work with binary data in memory. Unlike regular arrays, all elements have a fixed numeric type, which makes them efficient for performance-critical tasks like WebGL, audio processing, and networking.
Types of Typed Arrays
Int8Array
Storing small integer values efficiently when negative numbers are possible.
Example:
const int8 = new Int8Array([10, -20, 30]);
console.log(int8); // [10, -20, 30]
Uint8Array
Representing small positive numbers, like grayscale pixel values.
Example:
const uint8 = new Uint8Array([0, 128, 255]);
console.log(uint8); // [0, 128, 255]
Uint8ClampedArray
Commonly used in image processing (Canvas API) to ensure color values stay within 0–255.
Example:
const clamped = new Uint8ClampedArray([100, 300, -50]);
console.log(clamped); // [100, 255, 0]
Int16Array
Audio data or larger integer values where 8-bit is insufficient.
Example:
const int16 = new Int16Array([1000, -2000, 3000]);
console.log(int16); // [1000, -2000, 3000]
Uint16Array
Storing larger positive numbers, e.g., pixel data for 16-bit images.
Example:
const uint16 = new Uint16Array([0, 32000, 65535]);
console.log(uint16); // [0, 32000, 65535]
Int32Array
Large integer computations, like game scores or time stamps.
Example:
const int32 = new Int32Array([100000, -200000, 300000]);
console.log(int32); // [100000, -200000, 300000]
Uint32Array
Large positive numbers, e.g., file sizes, network packet lengths.
Example:
const uint32 = new Uint32Array([0, 2000000, 4000000000]);
console.log(uint32); // [0, 2000000, 4000000000]
Float32Array
High-performance decimal numbers, graphics calculations, audio processing.
Example:
const float32 = new Float32Array([1.5, 2.25, -0.75]);
console.log(float32); // [1.5, 2.25, -0.75]
Float64Array
High-precision calculations, scientific computations, large datasets.
Example:
const float64 = new Float64Array([1.123456789, 2.987654321]);
console.log(float64); // [1.123456789, 2.987654321]
Typed arrays can be created from a length, an array, or an ArrayBuffer.
Example:
// Create a typed array with length 5
const arr = new Int8Array(5);
console.log(arr); // [0, 0, 0, 0, 0]
// Create a typed array from an existing array
const nums = new Float32Array([1.5, 2.5, 3.5]);
console.log(nums); // [1.5, 2.5, 3.5]
You can access and modify elements using indexing, similar to regular arrays.
Example:
const bytes = new Uint8Array(3);
bytes[0] = 10;
bytes[1] = 20;
bytes[2] = 30;
console.log(bytes[1]); // 20
length – number of elementsbuffer – underlying ArrayBuffer objectbyteLength – size in bytes of the arraybyteOffset – offset in bytes from the start of the ArrayBufferExample:
const arr = new Uint16Array([10, 20, 30]);
console.log(arr.length); // 3
console.log(arr.byteLength); // 6 (2 bytes per element)
Typed arrays support many array methods like:
set() – copy values from another arraysubarray() – create a new view on part of the arrayforEach(), map(), filter() – iteration and transformationExample:
const arr = new Int16Array([1, 2, 3, 4]);
const sub = arr.subarray(1, 3);
console.log(sub); // [2, 3]
arr.forEach(value => console.log(value * 2));
// 2, 4, 6, 8| Name | Description |
|---|---|
Int8Array |
8-bit signed integer array. Values from -128 to 127. |
Uint8Array |
8-bit unsigned integer array. Values from 0 to 255. |
Uint8ClampedArray |
8-bit unsigned integer array, clamped between 0–255. |
Int16Array |
16-bit signed integer array. Values from -32,768 to 32,767. |
Uint16Array |
16-bit unsigned integer array. Values from 0 to 65,535. |
Int32Array |
32-bit signed integer array. Values from -2³¹ to 2³¹-1. |
Uint32Array |
32-bit unsigned integer array. Values from 0 to 2³²-1. |
Float32Array |
32-bit floating point numbers. |
Float64Array |
64-bit floating point numbers. |