JavaScript DataView

❮ Previous Next ❯

TheDataView Object lets you read and write multiple numeric typesin anArrayBuffer, at any byte offset, with optional control overendianness (byte order).

What Is a DataView?

ADataView is aview on top of anArrayBuffer.

ADataView does not store data by itself; instead, it lets you interpret the bytesin 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 configurablelittle-endian orbig-endian order

UseDataView when:

You have a binary format with fields of different types and sizes.
You need to control byte order (endianness).
Typed arrays likeUint8Array orFloat32Array are not flexible enough.

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

Creating a DataView

To create aDataView, you need anArrayBuffer.

Then you pass the ArrayBuffer to thenew 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;

Try it Yourself »

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

Example

Starts at offset 4 with length 8:

// 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;

Try it Yourself »

Note

MultipleDataView 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

getInt32() and setInt32()

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

getFloat64() and setFloat64()

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 thebyteOffset of the view).

Endianness (Byte Order)

Many binary formats specify whether multi-byte numbers are stored aslittle-endian orbig-endian.

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

MostDataView numeric methods have an optionallittleEndian 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)

Tip: Always check the documentation for your file format or protocol to know which endianness to use.

Mixed Types in One Buffer

One of the main advantages ofDataView 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 anArrayBuffer.
UsegetXxx() andsetXxx() methods with a byte offset (and optional endianness).
Great for binary protocols, file formats, and interoperability with other languages.
CombineDataView 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

Syntax	Description
`new DataView(buffer)`	View on entire`ArrayBuffer`.
`new DataView(buffer, byteOffset)`	View starting at`byteOffset` to the end.
`new DataView(buffer, byteOffset, byteLength)`	View of length`byteLength` starting at`byteOffset`.

Properties

Property	Description
`dataView.buffer`	The underlying`ArrayBuffer`.
`dataView.byteLength`	Number of bytes in this view.
`dataView.byteOffset`	Offset (in bytes) of this view from the start of the buffer.

Read Methods (get)

Method	Description
`getInt8(byteOffset)`	Reads an 8-bit signed integer.
`getUint8(byteOffset)`	Reads an 8-bit unsigned integer.
`getInt16(byteOffset, littleEndian?)`	Reads a 16-bit signed integer.
`getUint16(byteOffset, littleEndian?)`	Reads a 16-bit unsigned integer.
`getInt32(byteOffset, littleEndian?)`	Reads a 32-bit signed integer.
`getUint32(byteOffset, littleEndian?)`	Reads a 32-bit unsigned integer.
`getFloat32(byteOffset, littleEndian?)`	Reads a 32-bit floating point number.
`getFloat64(byteOffset, littleEndian?)`	Reads a 64-bit floating point number.
`getBigInt64(byteOffset, littleEndian?)`	Reads a 64-bit signed integer as`BigInt`.
`getBigUint64(byteOffset, littleEndian?)`	Reads a 64-bit unsigned integer as`BigInt`.

Write Methods (set)

Method	Description
`setInt8(byteOffset, value)`	Writes an 8-bit signed integer.
`setUint8(byteOffset, value)`	Writes an 8-bit unsigned integer.
`setInt16(byteOffset, value, littleEndian?)`	Writes a 16-bit signed integer.
`setUint16(byteOffset, value, littleEndian?)`	Writes a 16-bit unsigned integer.
`setInt32(byteOffset, value, littleEndian?)`	Writes a 32-bit signed integer.
`setUint32(byteOffset, value, littleEndian?)`	Writes a 32-bit unsigned integer.
`setFloat32(byteOffset, value, littleEndian?)`	Writes a 32-bit floating point number.
`setFloat64(byteOffset, value, littleEndian?)`	Writes a 64-bit floating point number.
`setBigInt64(byteOffset, value, littleEndian?)`	Writes a 64-bit signed integer`BigInt`.
`setBigUint64(byteOffset, value, littleEndian?)`	Writes a 64-bit unsigned integer`BigInt`.