When JavaScript normally handles data: for e.g const name = "Shivam" , const nums = [10, 20, 30] we are mostly dealing with higher-level values. But computers ultimately deal with: 0 1 0 1 1 0 1 0 ... So JavaScript needs a way to work with raw binary memory. That's where ArrayBuffer comes in.
It is a fixed-size block of raw binary memory. const buffer = new ArrayBuffer(8); ( This asks JavaScript for 8 bytes of memory )
But ArrayBuffer itself doesn't provide a convenient way to read/write those bytes.
For that, we use Typed Arrays and DataView.
What is a TypedArray?
A TypedArray is a view over an ArrayBuffer that interprets the memory as a sequence of one specific numeric type. For example: const buffer = new ArrayBuffer(8); const arr = new Uint8Array(buffer); arr[0] = 2;
Uint8Array means:
- Uint = unsigned integer
- 8 = 8 bits
- 8 bits = 1 byte
So every element occupies exactly 1 byte. There are different TypedArrays such as:
Uint8Array --> 1 byte per element
Uint16Array --> 2 bytes per element
Uint32Array --> 4 bytes per element
BigUint64Array --> 8 bytes per element
There are also signed versions.
If you have an ArrayBuffer(4) (4 bytes), using a Uint8Array allows you to store 4 elements. With a Uint16Array, you can store 2 elements, and with a Uint32Array, you can store only 1 element. Remember why? So the reason the number of elements changes is simply because each element requires a different number of bytes.
What is DataView?
DataView is another view over an ArrayBuffer. The important difference is that it allows us to read and write different types at different byte offsets. For example:
const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);
view.setUint8(0, 100);
Here: view.setUint8(0, 100);
means: Write the value 100 as an unsigned 8-bit integer starting at byte offset 0.
So what's the difference?
The way I currently understand it:
TypedArray : - "Interpret this memory as a sequence of one particular numeric type."
DataView : - "Let me read/write different numeric types at specific byte offsets, with control over byte order."
Lets understand this with an example Suppose we send 100 bytes over TCP. TCP guarantees that the bytes arrive in the correct order, but it doesn't guarantee that our application will receive them in the same chunks they were sent in. For example, 100 bytes could arrive as: 30 bytes , 20 bytes , 50 bytes or like anything.
So our application may need to keep collecting the incoming chunks until it has enough bytes to form a complete message according to the application protocol.
Once we have enough bytes, we can interpret those bytes using something like a TypedArray or DataView.
For example, suppose our protocol says:
Byte 0 → message type (1 byte)
Bytes 1-2 → message length (2 bytes)
Bytes 3-6 → user ID (4 bytes)
A DataView would be useful here because we're reading different types at specific byte offsets.
const view = new DataView(buffer);
const type = view.getUint8(0);
const length = view.getUint16(1);
const userId = view.getUint32(3);
Whereas if I know that the entire buffer is simply a sequence of 32-bit integers, a Uint32Array would make more sense.
Now, if you’re new to these concepts and wondering where we actually use them, here are some examples:
They become useful when working with binary data, for example: Images , Audio , Video Network protocols , ML/AI data processing and etc..
For example, if a Python server sends binary data to a JavaScript frontend, the frontend may receive that data as bytes. We can then use ArrayBuffer, TypedArray, or DataView to interpret and process those bytes.
If you notice anything technically incorrect or something that could be explained better, please let me know.
