Skip to main content

Typed Arrays in JavaScript (Live Playground)

Typed Arrays are a specialized data structure in JavaScript for working with binary data and fixed-size numeric values. They are useful when you need to handle large amounts of data efficiently or work with low-level APIs that require binary data. In this tutorial, we will explore the different types of Typed Arrays and how to use them.

ArrayBuffer​

An ArrayBuffer represents a fixed-length raw binary data buffer. You can create an ArrayBuffer by specifying its length in bytes:

const buffer = new ArrayBuffer(16); // Creates a 16-byte ArrayBuffer

Creating Typed Arrays​

There are several types of Typed Arrays, each designed to handle a specific data type. The most common types are:

  • Int8Array: 8-bit signed integers
  • Uint8Array: 8-bit unsigned integers
  • Int16Array: 16-bit signed integers
  • Uint16Array: 16-bit unsigned integers
  • Int32Array: 32-bit signed integers
  • Uint32Array: 32-bit unsigned integers
  • Float32Array: 32-bit floating point numbers
  • Float64Array: 64-bit floating point numbers

To create a Typed Array, you can pass an ArrayBuffer, a regular array, or the desired length of the Typed Array:

const arrayBuffer = new ArrayBuffer(16);

const int8Array = new Int8Array(arrayBuffer);
const uint8Array = new Uint8Array(16);
const float32Array = new Float32Array([0.5, 1.5, 2.5, 3.5]);

Accessing and Modifying Data​

You can access and modify data in a Typed Array using array indexing:

uint8Array[0] = 255; // Set the first element to 255
const value = uint8Array[0]; // Get the first element, returns 255

Length and Byte Length​

Typed Arrays have both a length property, which represents the number of elements, and a byteLength property, which represents the number of bytes:

console.log(uint8Array.length); // 16 elements
console.log(uint8Array.byteLength); // 16 bytes

Slicing Typed Arrays​

You can create a new Typed Array that references a portion of an existing one using the slice method:

const slicedArray = uint8Array.slice(4, 8); // Creates a new Uint8Array containing elements from index 4 to 7

DataView​

A DataView is another way to work with binary data. It provides more flexibility than Typed Arrays, as it allows you to work with multiple data types and control the endianness. To create a DataView, pass an ArrayBuffer:

const dataView = new DataView(arrayBuffer);

You can then use various methods to read and write data:

dataView.setUint8(0, 255); // Set the first byte as an unsigned 8-bit integer with value 255
dataView.setFloat32(4, 1.5, true); // Set the next 4 bytes as a little-endian 32-bit floating point number with value 1.5

const value1 = dataView.getUint8(0); // Read the first byte as an unsigned 8-bit integer
const value2 = dataView.getFloat32(4, true); // Read the next 4 bytes as a little-endian 32-bit floating point number
Live Playground, Try it Yourself

Conclusion​

Typed Arrays and ArrayBuffers provide efficient ways to handle binary data and fixed-size numeric values in JavaScript. They are useful for working with large datasets and interfacing with low-level APIs. In this tutorial, we explored the different types of Typed Arrays, how to create and manipulate them, and how to use DataViews for more flexibility when working with binary data.