ArrayBuffer in JavaScript

Imagine you’re building a simple web app. Everything is fine… until one day you need to upload an image, stream audio, verify a fingerprint/passkey, or process a PDF.

Suddenly, JavaScript feels weak. Strings are slow. Objects are heavy. And your app starts lagging.

That exact problem is why ArrayBuffer exists. Let’s break down with a simple analogy.

The Real Problem (Before ArrayBuffer)

JavaScript was originally designed for:

1. Buttons
2. Forms
3. Alerts
4. Small Logic

So it worked mainly with:

1. String
2. number
3. object
4. array

But modern apps deal with raw binary data:

1. photo/files
2. Videos /Audio
3. Network packets
4. Cryptography

Now the issue here is. Strings are a bad fit for Binary Data

"ThisisByteSpaceNepalImageData"

This is slow, unreliable, and challenging to encode. JavaScript needed a low-level, efficient way to handle raw data. That solution is ArrayBuffer.

Think of ArrayBuffer like:

Imagine you go to a godown(warehouse).

1. The godown is empty. It has a fixed size. It doesn’t care what you store inside.
2. That godown = ArrayBuffer (It only provides space, not meaning.

So, What Exactly is ArrayBuffer?

ArrayBuffer is a fixed-size block of raw memory used to store binary data. It stores in bytes and has a fixed size, but it does not ensure any data types (int, float, string).

const buffer = new ArrayByffer(0);

This means you reserved 8 bytes of memory; that’s it, no reading, no writing yet. However, you cannot access ArrayBuffer data directly. An ArrayBuffer is like a land to build something on; you need tools to build something. JavaScript provides TypedArray and DataView for it.

TypedArray: Giving meaning to Bytes

TypedArray tells JS, that the given bytes should be treated as numbers.

const buffer = new ArrayBuffer(3);
const view = new Uint8Array(buffer);

view[0] = 10;
view[1] = 20;
view[2] = 30;
view[3] = 40;

Simple analogy: buffer = raw memory, and view = interpretation of that memory. Think of it like, Same rice: Different dishes

Multiple Views, Same Memory (Powerful Concept)

This is where ArrayBuffer becomes dangerously powerful.

const buffer = new ArrayBuffer(4);

const bytes = new Uint8Array(buffer);
const numbers = new Uint16Array(buffer);

bytes[0] = 1;
bytes[1] = 0;

console.log(numbers[0]); // 1

Same memory. Different understanding.

This is heavily used in:

1. Game engines, Media processing
2. Network protocols

DataView: For Advanced Control

If TypedArray is like a calculator, DataView is like a full engineering toolkit. Used when:

1. Different data types in one buffer
2. Control over byte order (important in networking)

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

view.setInt32(0, 100, true);
view.setFloat32(4, 3.15, true);

console.log(view.getInt32(0, true));
console.log(view.getFloat32(4, true));

Where You’ll See ArrayBuffer in Real Life

File Uploads

const buffer = await file.arrayBuffer();

Used in:

1. Image validation/ PDF parsing/ File previews

---

Fetch API (Binary Responses)

const res = await fetch("/file.pdf");
const buffer = await res.arrayBuffer();

---

WebSockets

socket.binaryType = "arraybuffer";

---

Cryptography & Passkeys

Modern auth (WebAuthn) runs on ArrayBuffer. When your browser creates of verifies a passkey (fingerprint, faceID, security key), it is not working wth text like:

"myPassword123"

Instead, it works with:

1. Random bytes
2. Cryptographic keys/ Hashes
3. Signatures

And cryptography cannot trust strings because they can change due to encoding, and strings are not efficient, as well as unsafe for raw math operations. So cryptography needs exact bytes.

That’s where ArrayBuffer becomes mandatory.

Simple Cryptography Example (SHA-256 Hash)

Let’s say you want to hash some data in the browser. You CANNOT do this

crypto.subtle.digest("SHA-256", "hello");

This will fail. Because crypto.subtle.digest() it only accepts ArrayBuffer.

Correct Way (Using ArrayBuffer)

Step 1: Convert text => bytes

const text = "dipesh";
const encoder = new TextEncoder();
const data = encoder.encode(text);

What happened?

“hello” => bytes

Bytes are stored in a TypedArray, which internally uses an ArrayBuffer

Step 2: Hash using ArrayBuffer

const hashBuffer = await crypto.subtle.digest("SHA-256", data);

hashBuffer is an ArrayBuffer. At this level, the browser is doing raw math, Bit-by-bit operation, now text involved

---

WebAssembly (Future-Proof Skill)

WASM memory = ArrayBuffer.

ArrayBuffer vs Normal Array (Quick Comparison)

FeatureArrayArrayBuffer
Data type	Any	Binary only
Size	Dynamic	Fixed
Speed	Slower	Very fast
Use case	UI logic	Files, crypto, media

Simple Mental Model (Remember This)

ArrayBuffer = Raw memory

TypedArray / DataView = Glasses to see that memory

Once this clicks, everything becomes easy.

Bonus tip that you deserve here:

You don’t need an ArrayBuffer every day.

But when you need it, nothing else works properly.

1. Learn it once, understand the idea.
2. You’ll recognize the problem when it appears.
3. And when it does, you’ll know the solution.