JavaScript DataView - Complete Guide to Binary Data Access

DataView provides a low-level interface for reading and writing multiple number types in an ArrayBuffer, with control over endianness (byte order). Unlike typed arrays, DataView allows you to read and write different data types at arbitrary byte offsets.

Understanding DataView

DataView is designed for heterogeneous data where you need to interpret binary data as different types at different positions, making it ideal for parsing file formats and network protocols.

Creating DataView Objects

// Create from ArrayBuffer
const buffer = new ArrayBuffer(24);
const view = new DataView(buffer);

console.log(view.buffer === buffer); // true
console.log(view.byteLength); // 24
console.log(view.byteOffset); // 0

// Create with offset and length
const partialView = new DataView(buffer, 8, 12);
console.log(partialView.byteOffset); // 8
console.log(partialView.byteLength); // 12

// From existing typed array
const typedArray = new Float32Array([1.5, 2.5, 3.5, 4.5]);
const viewFromArray = new DataView(typedArray.buffer);
console.log(viewFromArray.byteLength); // 16 (4 floats × 4 bytes)

// Error handling
try {
  const invalidView = new DataView(buffer, 25); // Offset beyond buffer
} catch (e) {
  console.error('Invalid offset:', e.message);
}

try {
  const invalidLength = new DataView(buffer, 20, 10); // Length exceeds bounds
} catch (e) {
  console.error('Invalid length:', e.message);
}

Reading Data with DataView

DataView provides methods to read different data types at specified byte offsets.

Basic Read Operations

const buffer = new ArrayBuffer(32);
const view = new DataView(buffer);

// Write some test data first
view.setUint8(0, 255);
view.setInt8(1, -128);
view.setUint16(2, 65535, true); // little-endian
view.setInt16(4, -32768, true);
view.setUint32(6, 4294967295, true);
view.setInt32(10, -2147483648, true);
view.setFloat32(14, Math.PI, true);
view.setFloat64(18, Math.E, true);
view.setBigUint64(26, 0x1234567890abcdefn, true);

// Read data back
console.log('Uint8:', view.getUint8(0)); // 255
console.log('Int8:', view.getInt8(1)); // -128
console.log('Uint16:', view.getUint16(2, true)); // 65535
console.log('Int16:', view.getInt16(4, true)); // -32768
console.log('Uint32:', view.getUint32(6, true)); // 4294967295
console.log('Int32:', view.getInt32(10, true)); // -2147483648
console.log('Float32:', view.getFloat32(14, true)); // 3.14159...
console.log('Float64:', view.getFloat64(18, true)); // 2.71828...
console.log('BigUint64:', view.getBigUint64(26, true)); // 1311768467463790063n

// Reading with different endianness
view.setUint16(0, 0x1234); // big-endian (default)
console.log('Big-endian:', view.getUint16(0).toString(16)); // 1234
console.log('Little-endian:', view.getUint16(0, true).toString(16)); // 3412

// Reading individual bytes of multi-byte value
view.setUint32(0, 0x12345678);
console.log('Byte 0:', view.getUint8(0).toString(16)); // 12
console.log('Byte 1:', view.getUint8(1).toString(16)); // 34
console.log('Byte 2:', view.getUint8(2).toString(16)); // 56
console.log('Byte 3:', view.getUint8(3).toString(16)); // 78

Advanced Read Patterns

// Sequential reading with offset tracking
class DataReader {
  constructor(buffer) {
    this.view = new DataView(buffer);
    this.offset = 0;
  }

  readUint8() {
    const value = this.view.getUint8(this.offset);
    this.offset += 1;
    return value;
  }

  readUint16(littleEndian = false) {
    const value = this.view.getUint16(this.offset, littleEndian);
    this.offset += 2;
    return value;
  }

  readUint32(littleEndian = false) {
    const value = this.view.getUint32(this.offset, littleEndian);
    this.offset += 4;
    return value;
  }

  readFloat32(littleEndian = false) {
    const value = this.view.getFloat32(this.offset, littleEndian);
    this.offset += 4;
    return value;
  }

  readFloat64(littleEndian = false) {
    const value = this.view.getFloat64(this.offset, littleEndian);
    this.offset += 8;
    return value;
  }

  readString(length) {
    const bytes = new Uint8Array(
      this.view.buffer,
      this.view.byteOffset + this.offset,
      length
    );
    this.offset += length;
    return new TextDecoder().decode(bytes);
  }

  readNullTerminatedString() {
    let length = 0;
    while (this.view.getUint8(this.offset + length) !== 0) {
      length++;
    }
    const str = this.readString(length);
    this.offset++; // Skip null terminator
    return str;
  }

  skip(bytes) {
    this.offset += bytes;
  }

  seek(offset) {
    this.offset = offset;
  }

  get bytesRemaining() {
    return this.view.byteLength - this.offset;
  }
}

// Usage
const buffer = new ArrayBuffer(100);
const writer = new DataView(buffer);

// Write some data
writer.setUint32(0, 0x12345678, true);
writer.setFloat32(4, 3.14159, true);
const encoder = new TextEncoder();
const textBytes = encoder.encode('Hello');
new Uint8Array(buffer, 8, 5).set(textBytes);
writer.setUint8(13, 0); // Null terminator

// Read it back
const reader = new DataReader(buffer);
console.log('Uint32:', reader.readUint32(true).toString(16)); // 12345678
console.log('Float:', reader.readFloat32(true)); // 3.14159
console.log('String:', reader.readNullTerminatedString()); // Hello

Writing Data with DataView

DataView provides corresponding write methods for each data type.

Basic Write Operations

const buffer = new ArrayBuffer(64);
const view = new DataView(buffer);

// Writing different data types
view.setUint8(0, 255);
view.setInt8(1, -100);
view.setUint16(2, 1000, true);
view.setInt16(4, -1000, true);
view.setUint32(6, 1000000, true);
view.setInt32(10, -1000000, true);
view.setFloat32(14, 123.456, true);
view.setFloat64(18, 123.456789012345, true);
view.setBigInt64(26, -1234567890123456789n, true);
view.setBigUint64(34, 1234567890123456789n, true);

// Verifying written data
console.log(view.getFloat32(14, true)); // 123.456
console.log(view.getFloat64(18, true)); // 123.456789012345

// Writing with bounds checking
function safeWrite(view, offset, type, value, littleEndian) {
  const sizes = {
    Uint8: 1,
    Int8: 1,
    Uint16: 2,
    Int16: 2,
    Uint32: 4,
    Int32: 4,
    Float32: 4,
    Float64: 8,
    BigUint64: 8,
    BigInt64: 8,
  };

  const size = sizes[type];
  if (offset + size > view.byteLength) {
    throw new RangeError(`Write would exceed buffer bounds`);
  }

  view[`set${type}`](offset, value, littleEndian);
}

// Safe writing
try {
  safeWrite(view, 60, 'Uint32', 12345, true); // OK
  safeWrite(view, 62, 'Uint32', 12345, true); // Error: would exceed bounds
} catch (e) {
  console.error(e.message);
}

Structured Data Writing

// Binary structure writer
class BinaryWriter {
  constructor(size) {
    this.buffer = new ArrayBuffer(size);
    this.view = new DataView(this.buffer);
    this.offset = 0;
  }

  writeUint8(value) {
    this.checkBounds(1);
    this.view.setUint8(this.offset, value);
    this.offset += 1;
    return this;
  }

  writeUint16(value, littleEndian = false) {
    this.checkBounds(2);
    this.view.setUint16(this.offset, value, littleEndian);
    this.offset += 2;
    return this;
  }

  writeUint32(value, littleEndian = false) {
    this.checkBounds(4);
    this.view.setUint32(this.offset, value, littleEndian);
    this.offset += 4;
    return this;
  }

  writeFloat32(value, littleEndian = false) {
    this.checkBounds(4);
    this.view.setFloat32(this.offset, value, littleEndian);
    this.offset += 4;
    return this;
  }

  writeFloat64(value, littleEndian = false) {
    this.checkBounds(8);
    this.view.setFloat64(this.offset, value, littleEndian);
    this.offset += 8;
    return this;
  }

  writeString(str, encoding = 'utf-8') {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str);
    this.checkBounds(bytes.length);
    new Uint8Array(this.buffer, this.offset, bytes.length).set(bytes);
    this.offset += bytes.length;
    return this;
  }

  writePascalString(str) {
    // Length-prefixed string
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str);
    this.writeUint16(bytes.length, true);
    this.checkBounds(bytes.length);
    new Uint8Array(this.buffer, this.offset, bytes.length).set(bytes);
    this.offset += bytes.length;
    return this;
  }

  writeBytes(bytes) {
    this.checkBounds(bytes.length);
    new Uint8Array(this.buffer, this.offset, bytes.length).set(bytes);
    this.offset += bytes.length;
    return this;
  }

  pad(alignment) {
    const remainder = this.offset % alignment;
    if (remainder !== 0) {
      const padding = alignment - remainder;
      this.skip(padding);
    }
    return this;
  }

  skip(bytes) {
    this.checkBounds(bytes);
    this.offset += bytes;
    return this;
  }

  checkBounds(size) {
    if (this.offset + size > this.view.byteLength) {
      throw new RangeError('Write would exceed buffer bounds');
    }
  }

  getBuffer() {
    return this.buffer.slice(0, this.offset);
  }
}

// Create a complex binary structure
const writer = new BinaryWriter(256);

writer
  .writeUint32(0xdeadbeef, true) // Magic number
  .writeUint16(1, true) // Version
  .writeUint16(0, true) // Flags
  .writePascalString('Hello, World!')
  .pad(4) // Align to 4 bytes
  .writeFloat32(Math.PI, true)
  .writeFloat32(Math.E, true)
  .writeBytes(new Uint8Array([1, 2, 3, 4, 5]));

const result = writer.getBuffer();
console.log('Written', result.byteLength, 'bytes');

Endianness Handling

Endianness (byte order) is crucial when working with binary data that needs to be portable across different systems.

Understanding Endianness

// Demonstrate endianness differences
function demonstrateEndianness() {
  const buffer = new ArrayBuffer(4);
  const view = new DataView(buffer);
  const bytes = new Uint8Array(buffer);

  // Write a 32-bit value
  view.setUint32(0, 0x12345678, false); // Big-endian
  console.log(
    'Big-endian bytes:',
    Array.from(bytes).map((b) => b.toString(16).padStart(2, '0'))
  );
  // Output: ['12', '34', '56', '78']

  view.setUint32(0, 0x12345678, true); // Little-endian
  console.log(
    'Little-endian bytes:',
    Array.from(bytes).map((b) => b.toString(16).padStart(2, '0'))
  );
  // Output: ['78', '56', '34', '12']
}

// Detect system endianness
function getSystemEndianness() {
  const buffer = new ArrayBuffer(2);
  const uint16 = new Uint16Array(buffer);
  const uint8 = new Uint8Array(buffer);

  uint16[0] = 0x1234;

  if (uint8[0] === 0x34 && uint8[1] === 0x12) {
    return 'little';
  } else if (uint8[0] === 0x12 && uint8[1] === 0x34) {
    return 'big';
  }
  return 'unknown';
}

console.log('System endianness:', getSystemEndianness());

// Endianness conversion utilities
class EndianUtils {
  static swap16(value) {
    return ((value & 0xff) << 8) | ((value >> 8) & 0xff);
  }

  static swap32(value) {
    return (
      ((value & 0xff) << 24) |
      ((value & 0xff00) << 8) |
      ((value & 0xff0000) >>> 8) |
      ((value >>> 24) & 0xff)
    );
  }

  static swap64(buffer, offset = 0) {
    const view = new DataView(buffer);
    const high = view.getUint32(offset, false);
    const low = view.getUint32(offset + 4, false);
    view.setUint32(offset, low, false);
    view.setUint32(offset + 4, high, false);
  }

  static readWithEndianness(view, offset, type, forceEndianness) {
    const systemIsLittle = getSystemEndianness() === 'little';
    const useLittleEndian = forceEndianness === 'little';

    if (type === 'Uint8' || type === 'Int8') {
      return view[`get${type}`](offset);
    }

    return view[`get${type}`](offset, useLittleEndian);
  }
}

Practical Applications

Binary File Format Parsing

// PNG file parser
class PNGParser {
  constructor(arrayBuffer) {
    this.view = new DataView(arrayBuffer);
    this.offset = 0;
  }

  readSignature() {
    const signature = new Uint8Array(this.view.buffer, this.offset, 8);
    const expected = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];

    if (!signature.every((byte, i) => byte === expected[i])) {
      throw new Error('Not a valid PNG file');
    }

    this.offset += 8;
    return true;
  }

  readChunk() {
    if (this.offset >= this.view.byteLength) {
      return null;
    }

    // Read chunk length (4 bytes, big-endian)
    const length = this.view.getUint32(this.offset, false);
    this.offset += 4;

    // Read chunk type (4 bytes)
    const typeBytes = new Uint8Array(this.view.buffer, this.offset, 4);
    const type = String.fromCharCode(...typeBytes);
    this.offset += 4;

    // Read chunk data
    const data = new Uint8Array(this.view.buffer, this.offset, length);
    this.offset += length;

    // Read CRC (4 bytes)
    const crc = this.view.getUint32(this.offset, false);
    this.offset += 4;

    return { type, data, crc };
  }

  parseIHDR(data) {
    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);

    return {
      width: view.getUint32(0, false),
      height: view.getUint32(4, false),
      bitDepth: view.getUint8(8),
      colorType: view.getUint8(9),
      compression: view.getUint8(10),
      filter: view.getUint8(11),
      interlace: view.getUint8(12),
    };
  }

  parse() {
    this.readSignature();

    const chunks = [];
    let chunk;

    while ((chunk = this.readChunk()) !== null) {
      chunks.push(chunk);

      if (chunk.type === 'IHDR') {
        chunk.header = this.parseIHDR(chunk.data);
      }

      if (chunk.type === 'IEND') {
        break;
      }
    }

    return chunks;
  }
}

// ZIP file central directory parser
class ZIPCentralDirectory {
  constructor(buffer, offset) {
    this.view = new DataView(buffer, offset);
    this.offset = 0;
  }

  readEntry() {
    // Check signature
    const signature = this.view.getUint32(this.offset, true);
    if (signature !== 0x02014b50) {
      return null;
    }

    const entry = {
      signature: signature,
      versionMadeBy: this.view.getUint16(this.offset + 4, true),
      versionNeeded: this.view.getUint16(this.offset + 6, true),
      flags: this.view.getUint16(this.offset + 8, true),
      compression: this.view.getUint16(this.offset + 10, true),
      modTime: this.view.getUint16(this.offset + 12, true),
      modDate: this.view.getUint16(this.offset + 14, true),
      crc32: this.view.getUint32(this.offset + 16, true),
      compressedSize: this.view.getUint32(this.offset + 20, true),
      uncompressedSize: this.view.getUint32(this.offset + 24, true),
      fileNameLength: this.view.getUint16(this.offset + 28, true),
      extraFieldLength: this.view.getUint16(this.offset + 30, true),
      commentLength: this.view.getUint16(this.offset + 32, true),
      diskNumber: this.view.getUint16(this.offset + 34, true),
      internalAttributes: this.view.getUint16(this.offset + 36, true),
      externalAttributes: this.view.getUint32(this.offset + 38, true),
      localHeaderOffset: this.view.getUint32(this.offset + 42, true),
    };

    // Read variable length fields
    const nameBytes = new Uint8Array(
      this.view.buffer,
      this.view.byteOffset + this.offset + 46,
      entry.fileNameLength
    );
    entry.fileName = new TextDecoder().decode(nameBytes);

    // Update offset
    this.offset +=
      46 + entry.fileNameLength + entry.extraFieldLength + entry.commentLength;

    return entry;
  }
}

Network Protocol Implementation

// WebSocket frame parser
class WebSocketFrame {
  constructor(buffer) {
    this.view = new DataView(buffer);
    this.offset = 0;
  }

  parse() {
    const frame = {};

    // First byte: FIN (1 bit) + RSV (3 bits) + Opcode (4 bits)
    const firstByte = this.view.getUint8(0);
    frame.fin = (firstByte & 0x80) === 0x80;
    frame.rsv1 = (firstByte & 0x40) === 0x40;
    frame.rsv2 = (firstByte & 0x20) === 0x20;
    frame.rsv3 = (firstByte & 0x10) === 0x10;
    frame.opcode = firstByte & 0x0f;

    // Second byte: MASK (1 bit) + Payload length (7 bits)
    const secondByte = this.view.getUint8(1);
    frame.masked = (secondByte & 0x80) === 0x80;
    frame.payloadLength = secondByte & 0x7f;

    this.offset = 2;

    // Extended payload length
    if (frame.payloadLength === 126) {
      frame.payloadLength = this.view.getUint16(2, false);
      this.offset = 4;
    } else if (frame.payloadLength === 127) {
      frame.payloadLength = this.view.getBigUint64(2, false);
      this.offset = 10;
    }

    // Masking key
    if (frame.masked) {
      frame.maskingKey = new Uint8Array(this.view.buffer, this.offset, 4);
      this.offset += 4;
    }

    // Payload data
    const payloadBytes = new Uint8Array(
      this.view.buffer,
      this.offset,
      Number(frame.payloadLength)
    );

    // Unmask payload if needed
    if (frame.masked) {
      for (let i = 0; i < payloadBytes.length; i++) {
        payloadBytes[i] ^= frame.maskingKey[i % 4];
      }
    }

    frame.payload = payloadBytes;

    // Decode text frames
    if (frame.opcode === 0x1) {
      // Text frame
      frame.text = new TextDecoder().decode(frame.payload);
    }

    return frame;
  }

  static create(data, options = {}) {
    const isText = typeof data === 'string';
    const payload = isText ? new TextEncoder().encode(data) : data;

    const frame = {
      fin: options.fin !== false,
      rsv1: false,
      rsv2: false,
      rsv3: false,
      opcode: options.opcode ?? (isText ? 0x1 : 0x2),
      masked: options.masked ?? true,
      payload: payload,
    };

    // Calculate buffer size
    let headerSize = 2;
    if (payload.length > 65535) {
      headerSize += 8;
    } else if (payload.length > 125) {
      headerSize += 2;
    }
    if (frame.masked) {
      headerSize += 4;
    }

    const buffer = new ArrayBuffer(headerSize + payload.length);
    const view = new DataView(buffer);
    let offset = 0;

    // First byte
    view.setUint8(
      offset++,
      (frame.fin ? 0x80 : 0) |
        (frame.rsv1 ? 0x40 : 0) |
        (frame.rsv2 ? 0x20 : 0) |
        (frame.rsv3 ? 0x10 : 0) |
        frame.opcode
    );

    // Payload length
    if (payload.length > 65535) {
      view.setUint8(offset++, (frame.masked ? 0x80 : 0) | 127);
      view.setBigUint64(offset, BigInt(payload.length), false);
      offset += 8;
    } else if (payload.length > 125) {
      view.setUint8(offset++, (frame.masked ? 0x80 : 0) | 126);
      view.setUint16(offset, payload.length, false);
      offset += 2;
    } else {
      view.setUint8(offset++, (frame.masked ? 0x80 : 0) | payload.length);
    }

    // Masking key
    let maskingKey;
    if (frame.masked) {
      maskingKey = new Uint8Array(4);
      crypto.getRandomValues(maskingKey);
      new Uint8Array(buffer, offset, 4).set(maskingKey);
      offset += 4;
    }

    // Payload (masked if needed)
    const payloadView = new Uint8Array(buffer, offset);
    if (frame.masked) {
      for (let i = 0; i < payload.length; i++) {
        payloadView[i] = payload[i] ^ maskingKey[i % 4];
      }
    } else {
      payloadView.set(payload);
    }

    return buffer;
  }
}

Binary Data Structures

// 3D model vertex data
class VertexBuffer {
  constructor(vertexCount) {
    // Each vertex: position (3 floats) + normal (3 floats) + uv (2 floats)
    this.vertexSize = 32; // 8 floats × 4 bytes
    this.buffer = new ArrayBuffer(vertexCount * this.vertexSize);
    this.view = new DataView(this.buffer);
    this.vertexCount = vertexCount;
  }

  setVertex(index, position, normal, uv) {
    const offset = index * this.vertexSize;

    // Position
    this.view.setFloat32(offset, position.x, true);
    this.view.setFloat32(offset + 4, position.y, true);
    this.view.setFloat32(offset + 8, position.z, true);

    // Normal
    this.view.setFloat32(offset + 12, normal.x, true);
    this.view.setFloat32(offset + 16, normal.y, true);
    this.view.setFloat32(offset + 20, normal.z, true);

    // UV coordinates
    this.view.setFloat32(offset + 24, uv.u, true);
    this.view.setFloat32(offset + 28, uv.v, true);
  }

  getVertex(index) {
    const offset = index * this.vertexSize;

    return {
      position: {
        x: this.view.getFloat32(offset, true),
        y: this.view.getFloat32(offset + 4, true),
        z: this.view.getFloat32(offset + 8, true),
      },
      normal: {
        x: this.view.getFloat32(offset + 12, true),
        y: this.view.getFloat32(offset + 16, true),
        z: this.view.getFloat32(offset + 20, true),
      },
      uv: {
        u: this.view.getFloat32(offset + 24, true),
        v: this.view.getFloat32(offset + 28, true),
      },
    };
  }

  // Get typed array views for WebGL
  getPositionView() {
    return new Float32Array(this.buffer, 0, this.vertexCount * 3);
  }

  getNormalView() {
    return new Float32Array(this.buffer, 12, this.vertexCount * 3);
  }

  getUVView() {
    return new Float32Array(this.buffer, 24, this.vertexCount * 2);
  }
}

// Color data structure
class ColorBuffer {
  constructor(pixelCount) {
    this.buffer = new ArrayBuffer(pixelCount * 4);
    this.view = new DataView(this.buffer);
    this.pixels = new Uint8ClampedArray(this.buffer);
  }

  setPixelRGBA(index, r, g, b, a) {
    const offset = index * 4;
    this.view.setUint8(offset, r);
    this.view.setUint8(offset + 1, g);
    this.view.setUint8(offset + 2, b);
    this.view.setUint8(offset + 3, a);
  }

  setPixelHex(index, hex, alpha = 255) {
    const offset = index * 4;
    this.view.setUint8(offset, (hex >> 16) & 0xff); // R
    this.view.setUint8(offset + 1, (hex >> 8) & 0xff); // G
    this.view.setUint8(offset + 2, hex & 0xff); // B
    this.view.setUint8(offset + 3, alpha); // A
  }

  getPixelRGBA(index) {
    const offset = index * 4;
    return {
      r: this.view.getUint8(offset),
      g: this.view.getUint8(offset + 1),
      b: this.view.getUint8(offset + 2),
      a: this.view.getUint8(offset + 3),
    };
  }

  getPixelHex(index) {
    const offset = index * 4;
    const r = this.view.getUint8(offset);
    const g = this.view.getUint8(offset + 1);
    const b = this.view.getUint8(offset + 2);
    return (r << 16) | (g << 8) | b;
  }
}

Audio Data Processing

// Audio sample buffer with format conversion
class AudioBuffer {
  constructor(sampleCount, format = 'float32') {
    this.sampleCount = sampleCount;
    this.format = format;

    const bytesPerSample = {
      int16: 2,
      int32: 4,
      float32: 4,
      float64: 8,
    }[format];

    this.buffer = new ArrayBuffer(sampleCount * bytesPerSample);
    this.view = new DataView(this.buffer);
  }

  setSample(index, value) {
    switch (this.format) {
      case 'int16':
        this.view.setInt16(index * 2, Math.round(value * 32767), true);
        break;
      case 'int32':
        this.view.setInt32(index * 4, Math.round(value * 2147483647), true);
        break;
      case 'float32':
        this.view.setFloat32(index * 4, value, true);
        break;
      case 'float64':
        this.view.setFloat64(index * 8, value, true);
        break;
    }
  }

  getSample(index) {
    switch (this.format) {
      case 'int16':
        return this.view.getInt16(index * 2, true) / 32768;
      case 'int32':
        return this.view.getInt32(index * 4, true) / 2147483648;
      case 'float32':
        return this.view.getFloat32(index * 4, true);
      case 'float64':
        return this.view.getFloat64(index * 8, true);
    }
  }

  convert(targetFormat) {
    if (targetFormat === this.format) {
      return this;
    }

    const newBuffer = new AudioBuffer(this.sampleCount, targetFormat);

    for (let i = 0; i < this.sampleCount; i++) {
      newBuffer.setSample(i, this.getSample(i));
    }

    return newBuffer;
  }

  // Interleave stereo channels
  static interleave(left, right) {
    const samples = left.sampleCount;
    const result = new AudioBuffer(samples * 2, left.format);

    for (let i = 0; i < samples; i++) {
      result.setSample(i * 2, left.getSample(i));
      result.setSample(i * 2 + 1, right.getSample(i));
    }

    return result;
  }

  // Deinterleave stereo channels
  static deinterleave(stereo) {
    const samples = stereo.sampleCount / 2;
    const left = new AudioBuffer(samples, stereo.format);
    const right = new AudioBuffer(samples, stereo.format);

    for (let i = 0; i < samples; i++) {
      left.setSample(i, stereo.getSample(i * 2));
      right.setSample(i, stereo.getSample(i * 2 + 1));
    }

    return { left, right };
  }
}

Performance Optimization

Efficient DataView Operations

// Batch operations for better performance
class OptimizedDataView {
  constructor(buffer) {
    this.view = new DataView(buffer);
    this.uint8 = new Uint8Array(buffer);
    this.uint32 = new Uint32Array(buffer);
    this.float32 = new Float32Array(buffer);
  }

  // Fast byte copy
  copyBytes(srcOffset, destOffset, length) {
    this.uint8.copyWithin(destOffset, srcOffset, srcOffset + length);
  }

  // Fast fill
  fillBytes(offset, length, value) {
    this.uint8.fill(value, offset, offset + length);
  }

  // Batch read operations
  readUint32Array(offset, count, littleEndian) {
    const result = new Uint32Array(count);

    if (
      littleEndian === undefined ||
      littleEndian === (new Uint8Array(new Uint32Array([1]).buffer)[0] === 1)
    ) {
      // Native endianness - use typed array
      result.set(new Uint32Array(this.view.buffer, offset, count));
    } else {
      // Need endian conversion
      for (let i = 0; i < count; i++) {
        result[i] = this.view.getUint32(offset + i * 4, littleEndian);
      }
    }

    return result;
  }

  // Batch write operations
  writeUint32Array(offset, values, littleEndian) {
    if (
      littleEndian === undefined ||
      littleEndian === (new Uint8Array(new Uint32Array([1]).buffer)[0] === 1)
    ) {
      // Native endianness
      new Uint32Array(this.view.buffer, offset, values.length).set(values);
    } else {
      // Need endian conversion
      for (let i = 0; i < values.length; i++) {
        this.view.setUint32(offset + i * 4, values[i], littleEndian);
      }
    }
  }
}

// Caching frequently accessed values
class CachedDataView {
  constructor(buffer) {
    this.view = new DataView(buffer);
    this.cache = new Map();
  }

  getUint32Cached(offset, littleEndian = false) {
    const key = `u32:${offset}:${littleEndian}`;

    if (this.cache.has(key)) {
      return this.cache.get(key);
    }

    const value = this.view.getUint32(offset, littleEndian);
    this.cache.set(key, value);
    return value;
  }

  setUint32(offset, value, littleEndian = false) {
    this.view.setUint32(offset, value, littleEndian);
    this.cache.delete(`u32:${offset}:${littleEndian}`);
    this.cache.delete(`u32:${offset}:${!littleEndian}`);
  }

  invalidateCache() {
    this.cache.clear();
  }
}

Error Handling

// Robust DataView wrapper
class SafeDataView {
  constructor(buffer) {
    if (!(buffer instanceof ArrayBuffer)) {
      throw new TypeError('Buffer must be an ArrayBuffer');
    }

    this.view = new DataView(buffer);
  }

  checkBounds(offset, size) {
    if (offset < 0 || offset + size > this.view.byteLength) {
      throw new RangeError(
        `Access out of bounds: offset=${offset}, size=${size}, buffer=${this.view.byteLength}`
      );
    }
  }

  getUint8(offset) {
    this.checkBounds(offset, 1);
    return this.view.getUint8(offset);
  }

  getUint16(offset, littleEndian) {
    this.checkBounds(offset, 2);
    return this.view.getUint16(offset, littleEndian);
  }

  getUint32(offset, littleEndian) {
    this.checkBounds(offset, 4);
    return this.view.getUint32(offset, littleEndian);
  }

  setUint32(offset, value, littleEndian) {
    this.checkBounds(offset, 4);

    if (!Number.isInteger(value) || value < 0 || value > 0xffffffff) {
      throw new RangeError('Value must be a 32-bit unsigned integer');
    }

    this.view.setUint32(offset, value, littleEndian);
  }

  getString(offset, length, encoding = 'utf-8') {
    this.checkBounds(offset, length);

    const bytes = new Uint8Array(
      this.view.buffer,
      this.view.byteOffset + offset,
      length
    );
    return new TextDecoder(encoding).decode(bytes);
  }
}

Best Practices

Always specify endianness explicitly

// Good - explicit endianness
view.setUint32(0, value, true); // little-endian

// Bad - relies on default (big-endian)
view.setUint32(0, value);

Use appropriate data types

// For mixed types, use DataView
const view = new DataView(buffer);
view.setUint32(0, intValue, true);
view.setFloat32(4, floatValue, true);

// For homogeneous data, use TypedArrays
const floats = new Float32Array(buffer);

Validate offsets and bounds

function safeRead(view, offset, type, littleEndian) {
  const sizes = {
    Uint8: 1,
    Uint16: 2,
    Uint32: 4,
    Float32: 4,
    Float64: 8,
  };

  if (offset + sizes[type] > view.byteLength) {
    throw new RangeError('Read out of bounds');
  }

  return view[`get${type}`](offset, littleEndian);
}

Consider performance implications

// For bulk operations, use typed arrays when possible
const ints = new Uint32Array(buffer);
for (let i = 0; i < ints.length; i++) {
  ints[i] = i;
}

// DataView is slower but more flexible
for (let i = 0; i < count; i++) {
  view.setUint32(i * 4, i, true);
}

Conclusion

DataView is an essential tool for working with binary data in JavaScript, especially when dealing with heterogeneous data structures, file formats, and network protocols. Its explicit control over endianness and support for multiple data types at arbitrary offsets makes it invaluable for cross-platform binary data manipulation. While TypedArrays are more efficient for homogeneous data, DataView provides the flexibility needed for complex binary formats. Understanding DataView is crucial for anyone working with low-level data manipulation, file parsing, or binary protocols in JavaScript.

JavaScript DataView: Low-Level Binary Data Access