J

JavaScript Handbook

Clean • Professional

JavaScript Typed Arrays

3 minute

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

learn code with durgesh images

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 elements
  • buffer – underlying ArrayBuffer object
  • byteLength – size in bytes of the array
  • byteOffset – offset in bytes from the start of the ArrayBuffer

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 array
  • subarray() – create a new view on part of the array
  • forEach(), 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

NameDescription
Int8Array8-bit signed integer array. Values from -128 to 127.
Uint8Array8-bit unsigned integer array. Values from 0 to 255.
Uint8ClampedArray8-bit unsigned integer array, clamped between 0–255.
Int16Array16-bit signed integer array. Values from -32,768 to 32,767.
Uint16Array16-bit unsigned integer array. Values from 0 to 65,535.
Int32Array32-bit signed integer array. Values from -2³¹ to 2³¹-1.
Uint32Array32-bit unsigned integer array. Values from 0 to 2³²-1.
Float32Array32-bit floating point numbers.
Float64Array64-bit floating point numbers.


Article 0 of 0