JavaScript Typed Arrays
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.
- Type: Signed 8-bit integer
- Range: -128 to 127
- Size: 1 byte per element
Example:
const int8 = new Int8Array([10, -20, 30]);
console.log(int8); // [10, -20, 30]
Uint8Array
Representing small positive numbers, like grayscale pixel values.
- Type: Unsigned 8-bit integer
- Range: 0 to 255
- Size: 1 byte per element
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.
- Type: Unsigned 8-bit integer (clamped)
- Range: 0 to 255 (values outside range are clamped)
- Size: 1 byte per element
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.
- Type: Signed 16-bit integer
- Range: -32,768 to 32,767
- Size: 2 bytes per element
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.
- Type: Unsigned 16-bit integer
- Range: 0 to 65,535
- Size: 2 bytes per element
Example:
const uint16 = new Uint16Array([0, 32000, 65535]);
console.log(uint16); // [0, 32000, 65535]
Int32Array
Large integer computations, like game scores or time stamps.
- Type: Signed 32-bit integer
- Range: -2,147,483,648 to 2,147,483,647
- Size: 4 bytes per element
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.
- Type: Unsigned 32-bit integer
- Range: 0 to 4,294,967,295
- Size: 4 bytes per element
Example:
const uint32 = new Uint32Array([0, 2000000, 4000000000]);
console.log(uint32); // [0, 2000000, 4000000000]
Float32Array
High-performance decimal numbers, graphics calculations, audio processing.
- Type: 32-bit floating point number
- Range: ±1.18e-38 to ±3.4e38 (approx)
- Size: 4 bytes per element
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.
- Type: 64-bit floating point number (double precision)
- Range: ±5.0e-324 to ±1.7e308 (approx)
- Size: 8 bytes per element
Example:
const float64 = new Float64Array([1.123456789, 2.987654321]);
console.log(float64); // [1.123456789, 2.987654321]
Creating Typed Arrays
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]
Accessing and Modifying Elements
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
Properties of Typed Arrays
length
– number of elementsbuffer
– underlyingArrayBuffer
objectbyteLength
– size in bytes of the arraybyteOffset
– offset in bytes from the start of theArrayBuffer
Example:
const arr = new Uint16Array([10, 20, 30]);
console.log(arr.length); // 3
console.log(arr.byteLength); // 6 (2 bytes per element)
Methods Available
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 transformation
Example:
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
JavaScript Typed Arrays Reference
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. |