DataViews

The DataView Object lets you read and write multiple numeric types in an ArrayBuffer, at any byte offset, with optional control over endianness (byte order).

What Is a DataView?

A DataView is a view on top of an ArrayBuffer.

A DataView does not store data by itself; instead, it lets you interpret the bytes in the buffer as different types:

• 8-bit, 16-bit, 32-bit integers (signed and unsigned)
• 32-bit and 64-bit floating point numbers
• At arbitrary byte offsets in the buffer
• With configurable little-endian or big-endian order

Use DataView when:

• You have a binary format with fields of different types and sizes.
• You need to control byte order (endianness).
• Typed arrays like Uint8Array or Float32Array are not flexible enough.

Use DataView when you work with binary data where you need full control over byte layout and types (for example network packets, file formats, or interoperability with other languages).

Creating a DataView

To create a DataView, you need an ArrayBuffer.

Then you pass the ArrayBuffer to the new DataView() constructor:

Example

// Create a 16 bytes ArrayBuffer

const buffer = new ArrayBuffer(16);

// Create a new DataView

const view = new DataView(buffer);

// Get lengths and offset

let len1 = buffer.byteLength);

let len2 = view.byteLength;

let off1 = view.byteOffset;

You can also create a DataView that starts at a specific offset and has a limited length:

Example

// Create a 16 bytes ArrayBuffer

const buffer = new ArrayBuffer(16);

// Create a new DataView

const view = new DataView(buffer, 4, 8);

// Get lengths and offset

let len1 = buffer.byteLength);

let len2 = view.byteLength;

let off1 = view.byteOffset;

Note: Multiple DataView and typed array views can share the same ArrayBuffer.

Reading and Writing DataView Values

DataView uses getXxx() and setXxx() methods to read and write values:

• getInt8(), setInt8()
• getUint16(), setUint16()
• getInt32(), setInt32()
• getFloat32(), setFloat32()
• and more

Example

const buffer = new ArrayBuffer(8);

const view = new DataView(buffer);

// Write a 32-bit signed integer at byte offset 0

view.setInt32(0, 123456);

// Read it back

const value = view.getInt32(0);

console.log(value); // 123456

Example

const buffer = new ArrayBuffer(16);

const view = new DataView(buffer);

view.setFloat64(0, Math.PI);

view.setFloat64(8, Math.E);

const pi = view.getFloat64(0);

const e  = view.getFloat64(8);

console.log("PI:", pi);

console.log("E:", e);

Note: The first argument is always the byte offset from the start of the underlying buffer (or the byteOffset of the view).

Endianness (Byte Order)

Many binary formats specify whether multi-byte numbers are stored as little-endian or big-endian.

• Little-endian: Least significant byte first (most common on PCs).
• Big-endian: Most significant byte first (common in some protocols).

Most DataView numeric methods have an optional littleEndian parameter:

• true = little-endian
• false (or omitted) = big-endian

Example: Writing with Little-Endian and Big-Endian

const buffer = new ArrayBuffer(4);

const view   = new DataView(buffer);

// Same number, two different byte orders:

view.setUint32(0, 0x12345678, true);  // little-endian

console.log(new Uint8Array(buffer));

// Example output: Uint8Array(4) [120, 86, 52, 18] (0x78, 0x56, 0x34, 0x12)

// Overwrite with big-endian

view.setUint32(0, 0x12345678, false); // big-endian

console.log(new Uint8Array(buffer));

// Example output: Uint8Array(4) [18, 52, 86, 120] (0x12, 0x34, 0x56, 0x78)

Mixed Types in One Buffer

One of the main advantages of DataView is that you can mix different types in a single buffer. For example:

• 1 byte for a flag
• 2 bytes for a length
• 4 bytes for a float

Example: Mixed Types

const buffer = new ArrayBuffer(12);

const view   = new DataView(buffer);

// Byte 0: a flag (0 or 1)

view.setUint8(0, 1);

// Bytes 1-2: a 16-bit length (little-endian)

view.setUint16(1, 500, true);

// Bytes 4-11: a 64-bit float (skip byte 3 for alignment)

view.setFloat64(4, 3.14159, true);

// Read the values back

const flag   = view.getUint8(0);

const length = view.getUint16(1, true);

const value  = view.getFloat64(4, true);

console.log("Flag:", flag);

console.log("Length:", length);

console.log("Value:", value);

Summary

• DataView is a flexible way to read and write multiple numeric types in an ArrayBuffer.
• Use getXxx() and setXxx() methods with a byte offset (and optional endianness).
• Great for binary protocols, file formats, and interoperability with other languages.
• Combine DataView with typed arrays to inspect individual bytes easily.

Common Use Cases

• Parsing binary file formats (images, audio, custom formats).
• Implementing binary network protocols on top of WebSocket or WebRTC.
• Interop with WebAssembly or native code where layout matters.
• Re-implementing C/C++ style structs and unions in JavaScript.

DataView Reference

Revised December 2025

Constructor

Properties

Read Methods (get)

Write Methods (set)

Note: Learn More: Typed Array Tutorial Typed Array Methods Typed Array Reference Array Buffers Atomics