ArrayBuffer in JavaScript: A Deep Dive into Binary Data Handling (Part 2)

In the previous part of this series (Part 1), we explored the basics of ArrayBuffer—what it is and how it works. Today, we’ll dive deeper into some practical use cases where ArrayBuffer shines. From file handling to network communication and even WebAssembly, ArrayBuffer is incredibly versatile and can be applied in a variety of real-world scenarios. Let’s take a closer look at some of the most common use cases.

1. File Handling

Working with binary files — such as images, audio files, or PDFs — is one of the most common use cases for ArrayBuffer. JavaScript provides APIs like FileReader to read files into an ArrayBuffer, allowing you to manipulate the raw binary data directly.

Here’s how you can use ArrayBuffer to read and process an image file:

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0]; // Get the selected file
  const reader = new FileReader(); // Create a FileReader instance

  reader.onload = () => {
    const buffer = reader.result; // ArrayBuffer containing the file data
    const byteArray = new Uint8Array(buffer); // View the buffer as bytes
    console.log(byteArray); // Log the raw byte data
  };

  reader.readAsArrayBuffer(file); // Read the file as an ArrayBuffer
});

In this example:

• The FileReader reads the file into an ArrayBuffer.
• A Uint8Array is used to view the buffer as an array of bytes.
• This approach is useful for tasks like image processing, file validation, or custom file parsing.

2. Network Communication

When sending or receiving data over the network, binary data is often more efficient than text-based formats like JSON. ArrayBuffer is commonly used in APIs like Fetch and WebSockets to handle binary data.

fetch('https://example.com/data.bin')
  .then(response => response.arrayBuffer()) // Convert the response to an ArrayBuffer
  .then(buffer => {
    const data = new Uint8Array(buffer); // View the buffer as bytes
    console.log(data); // Log the binary data
  });

Here the fetch API retrieves binary data from a server. Then the response is converted into an ArrayBuffer and eventually a Uint8Array is used to access the raw byte data. This approach is ideal for downloading files, working with binary APIs, or handling custom network protocols.

3. WebAssembly

WebAssembly (Wasm) is a low-level binary format that runs in the browser, enabling high-performance applications. ArrayBuffer is often used to share memory between JavaScript and WebAssembly modules, making it a key player in performance-critical applications.

Get Dipta Barua’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In the following example, you can see ArrayBuffer is used to share memory with a WebAssembly module:

const memory = new WebAssembly.Memory({ initial: 1 }); // 1 page of memory (64KB)
const buffer = memory.buffer; // ArrayBuffer representing the memory
const int32Array = new Int32Array(buffer); // View the memory as 32-bit integers

// Pass the memory to a WebAssembly module
WebAssembly.instantiateStreaming(fetch('module.wasm'), { js: { mem: memory } })
  .then(obj => {
    // Use the WebAssembly module and shared memory
    console.log(int32Array[0]); // Access data written by WebAssembly
  });

Here:

• The WebAssembly.Memory object creates a shared memory buffer.
• The ArrayBuffer is used to represent the memory, and a Int32Array is used to access it as 32-bit integers.
• This use case is particularly relevant for games, simulations, or data processing applications.

4. Audio and Video Processing

ArrayBuffer is also widely used in audio and video processing to handle raw media data. For example, you can use it to manipulate audio samples or process video frames.

const audioContext = new AudioContext();
fetch('audio.wav')
  .then(response => response.arrayBuffer()) // Convert the response to an ArrayBuffer
  .then(buffer => {
    audioContext.decodeAudioData(buffer, decodedData => {
      console.log(decodedData); // Process the decoded audio data
    });
  });

In this example:

• The fetch API retrieves an audio file as an ArrayBuffer.
• The AudioContext.decodeAudioData method decodes the audio data for further processing.
• This approach is useful for building audio editors, visualizers, or custom media players.

Performance Considerations:

When working with ArrayBuffer, there are a few performance-related aspects to keep in mind:

1. Memory Efficiency: ArrayBuffer is highly memory-efficient because it stores raw binary data without additional overhead.
2. Direct Access: Typed arrays and DataView provide fast, direct access to the underlying data.
3. Garbage Collection: Since ArrayBuffer is a low-level object, it’s managed by the JavaScript engine, reducing the risk of memory leaks.

Why ArrayBuffer Matters:

ArrayBuffer is a powerful tool for handling binary data in JavaScript. Whether you’re working with files, network protocols, or WebAssembly, understanding ArrayBuffer and its associated views (TypedArray and DataView) is essential for building high-performance applications.

By mastering ArrayBuffer, you unlock the ability to work directly with raw binary data, opening up a world of possibilities for your JavaScript projects. From processing images and audio to optimizing network communication and enabling WebAssembly, ArrayBuffer is a key tool in your JavaScript toolkit.