JavaScript: Lost in binaries — Buffer/Blob/UInt8Array/ArrayBuffer

Hello you! If you have or going to do something simple like uploading an image to a web server, and if you also happen to be an Eminem in JavaScript, chances are you will be overwhelmed by confusing data types available to handle binary data. Worry you not! In this parchment, we will do a quick rundown on what they are and when to use each of them.

ArrayBuffer

ArrayBuffer provides a fixed-sized chunk of memory to hold binary data. This is the fundamental data type that represents binary in JavaScript. Every image, video, and audio can be thought of as ArrayBuffers under the hood! Unlike JavaScript arrays, which can be resized dynamically, an ArrayBuffer has a fixed size that is specified when it is created. This makes it a more efficient data type for working with binary data, as it does not require resizing operations, and can be used to store large amounts of binary data, such as images, videos, and audio files.

UInt8Array

UInt8Array provides helpful functions to perform byte-level manipulations on ArrayBuffer. Unlike ArrayBuffer, UInt8Array can be sliced and resized. It is also supported in both your web browser and NodeJS runtime.

// string => Uint8Array
const str = "Hello wolrd";
const encoder = new TextEncoder().encode(str);
encoder.encode(str) // Uint8Array(12) [115, 100, 115, 100 ...]

// file => Uint8Array (on browser)
const fileElement = document.createElement("input");
fileElement.type = "file";
fileElement.oninput = async (event) => {
  const file = fileElement.files?.[0]
  new Uint8Array(file)  // Uint8Array [115, 100, 115, 100 ...]
}
fileElement.click()

Uint8Array is the best data type to be transferred over the wire due to its compactness. On a side note, not every web server gives first-class treatment to Uint8Array as people typically don’t deal with binary data.

Blob

A blob (binary large object) is a high-level wrapper of binary data which is used to represent images, documents or other types of files. Blobs have additional encoding and metadata on top of binary data. These can also be created from strings, arrays, or other sources of data. Due to encoding blobs are usually less space efficient than ArrayBuffer and Uint8Array. Blobs are primarily used in HTML forms when uploading attachments.

Buffer

This is a Node.js only built-in class that provides a way to work with binary data directly, including creating, manipulating, and reading from binary data. It is implemented using Uint8Array and is designed to handle data in a way that is compatible with a wide range of I/O operations. Buffer objects can be created from strings, arrays, or other sources of data.

That’s it! In summary, ArrayBuffer, Uint8Array, Blob, and Buffer are all JavaScript objects used for handling binary data. ArrayBuffer provides a fixed-size block of memory that can be manipulated with binary data, while Uint8Array provides a view into that memory for more efficient manipulation. Blob is used to represent binary data that is used in HTTP requests and responses, while Buffer is used in Node.js to manipulate binary data for file I/O operations. Each object has its own specific use cases and can be useful in a wide range of applications that involve working with binary data.