How to convert a binary NodeJS Buffer to JavaScript ArrayBuffer?

Converting a binary NodeJS Buffer to JavaScript ArrayBuffer is a common requirement when working with binary data across different JavaScript environments. There are multiple approaches to achieve this conversion.

Method 1: Using buf.buffer Property (Direct Access)

The simplest approach is to access the buf.buffer property directly. However, this creates a view of the underlying ArrayBuffer, not a copy.

const buffer = Buffer.from([1, 2, 3, 4, 5]);
console.log("Original Buffer:", buffer);

// Direct access to underlying ArrayBuffer
const arrayBuffer = buffer.buffer;
console.log("ArrayBuffer byteLength:", arrayBuffer.byteLength);

// Create Uint8Array view to inspect data
const uint8View = new Uint8Array(arrayBuffer);
console.log("ArrayBuffer contents:", Array.from(uint8View));

Original Buffer: <Buffer 01 02 03 04 05>
ArrayBuffer byteLength: 8192
ArrayBuffer contents: [1, 2, 3, 4, 5, 0, 0, ...]

Note: The ArrayBuffer may be larger than the Buffer due to Node.js buffer pooling.

Method 2: Manual Copy (Guaranteed Size)

To create an ArrayBuffer with the exact size, manually copy the buffer data:

function bufferToArrayBuffer(buffer) {
    const arrayBuffer = new ArrayBuffer(buffer.length);
    const view = new Uint8Array(arrayBuffer);
    for (let i = 0; i < buffer.length; ++i) {
        view[i] = buffer[i];
    }
    return arrayBuffer;
}

const buffer = Buffer.from([10, 20, 30, 40]);
const arrayBuffer = bufferToArrayBuffer(buffer);

console.log("Buffer length:", buffer.length);
console.log("ArrayBuffer byteLength:", arrayBuffer.byteLength);
console.log("ArrayBuffer contents:", Array.from(new Uint8Array(arrayBuffer)));

Buffer length: 4
ArrayBuffer byteLength: 4
ArrayBuffer contents: [10, 20, 30, 40]

Method 3: Using buffer.slice()

Use buffer.slice() to get an exact copy without manual iteration:

const buffer = Buffer.from("Hello World", "utf8");
const arrayBuffer = buffer.slice().buffer;

console.log("Original Buffer:", buffer.toString());
console.log("ArrayBuffer byteLength:", arrayBuffer.byteLength);
console.log("Converted back to string:", Buffer.from(arrayBuffer).toString());

Original Buffer: Hello World
ArrayBuffer byteLength: 11
Converted back to string: Hello World

Comparison

Key Points

• Buffer instances in Node.js 4.x+ are also Uint8Array instances
• Direct buf.buffer access is fastest but may include extra bytes
• Manual copying guarantees exact size but requires iteration
• The slice() method provides a good balance of performance and accuracy

Conclusion

Use buf.buffer for quick access when size doesn't matter, or buf.slice().buffer when you need an exact-sized ArrayBuffer. Manual copying offers the most control but is slower for large buffers.