JavaScript Typed Arrays

Typed Arrays

Typed arrays was designed for handling Binary Data.

Unlike arrays, typed arrays are buffers of Fixed Length.

Typed arrays store elements of Fixed Types like 8-bit integers or 32-bit numbers.

Examples

const myArr = new Uint8Array(5);

Typed Array Benefits

Typed Arrays were designed to provide an efficient way to handle binary data, unlike traditional JavaScript arrays which can hold elements of mixed data types.

Typed arrays are raw memory, so JavaScript can pass them directly to any function without converting the data to another representation.

Typed arrays are seriously faster than normal arrays for passing data to functions that can use raw binary data. Typed Arrays are highly suitable for:

• WebGL and Canvas: Fast graphics rendering and image processing.
• File APIs: Fast reading and writing of local files.
• Media APIs: Fast handling of audio and video data.
• WebSockets: Efficient binary data transfer over network.

Browser APIs Supporting Typed Arrays

Fetch API Example

fetch(url)

.then(request => request.arrayBuffer())

.then(arrayBuffer =>...);

Canvas Example

const canvas = document.getElementById('my_canvas');

const context = canvas.getContext('2d');

const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

const uint8ClampedArray = imageData.data;

Differences from Regular Arrays

• Fixed Length: Typed Arrays cannot be dynamically resized using methods like push() or pop().
• Type Restriction: Elements must adhere to the specified data type of the typed array.
• Underlying Buffer: Typed Arrays are views into an ArrayBuffer, allowing direct manipulation of binary data.

Typed Array Types

8 Bit Integers

Examples

const myArr = new Int8Array(10);

Uint8Array vs Uint8ClampedArray

The difference between an Uint8Array and an Uint8ClampedArray is how values are added.

If you set one element in an Uint8ClampedArray to a value outside the 0-255 range, it will default to 0 or 255.

A typed array will just take the first 8 bits of the value.

16-Bits Integers

Examples

const myArr = new Int16Array(10);

32-Bit Integers

Examples

const myArr = new Int32Array(10);

64-Bit Integers

Examples

const myArr = new Bigint64Array(10);

Floating Point Numbers

As specified by the ECMAScript standard, arithmetic in JavaScript shall be done using double-precision floating-point arithmetic:

Examples

const myArr = new Float16Array(10);

Browser Support

Typed Arrays is an ES6 feature.

ES6 is fully supported in all modern browsers since June 2017: