Modern JavaScript (ES2024)

ArrayBuffer Transfer

Transfer and resize ArrayBuffers efficiently!

Find videos you like?

Save to resource drawer for future reference!

What is ArrayBuffer Transfer?

ArrayBuffer.prototype.transfer() andtransferToFixedLength() let you efficiently transfer and resize ArrayBuffers! The original buffer becomes detached - perfect for zero-copy transfers between workers!

Zero-Copy Performance!

Transfer ownership without copying data - extremely efficient for large buffers and worker communication!

🔄Transfer Methods

📦

transfer(newByteLength?)

Transfer with optional resize. Returns resizable ArrayBuffer.

🔒

transferToFixedLength(newByteLength?)

Transfer with optional resize. Returns fixed-length ArrayBuffer.

Example 1: Basic Transfer and Resize

Transfer ArrayBuffer ownership and resize

javascript

code

DarkEditable

// Create ArrayBuffer
const buffer1 = new ArrayBuffer(16);
const view1 = new Uint8Array(buffer1);
view1[0] = 42;
view1[1] = 99;

console.log(buffer1.byteLength);  // 16
console.log(view1[0]);            // 42

// Transfer to new buffer (same size)
const buffer2 = buffer1.transfer();

console.log(buffer2.byteLength);  // 16
console.log(buffer1.byteLength);  // 0 - DETACHED!

// Original buffer is now detached - can't use it
try {
  const view = new Uint8Array(buffer1);  // ❌ Error!
} catch (e) {
  console.log('Original buffer detached');
}

// New buffer has the data
const view2 = new Uint8Array(buffer2);
console.log(view2[0]);  // 42 ✅

// Transfer with resize (grow)
const buffer3 = new ArrayBuffer(8);
const view3 = new Uint8Array(buffer3);
view3[0] = 100;

const buffer4 = buffer3.transfer(16);  // Grow from 8 to 16

console.log(buffer4.byteLength);  // 16
console.log(buffer3.byteLength);  // 0 - detached

const view4 = new Uint8Array(buffer4);
console.log(view4[0]);   // 100 (preserved)
console.log(view4[15]);  // 0 (new space)

// Transfer with resize (shrink)
const buffer5 = new ArrayBuffer(16);
const view5 = new Uint8Array(buffer5);
for (let i = 0; i < 16; i++) view5[i] = i;

const buffer6 = buffer5.transfer(8);  // Shrink from 16 to 8

console.log(buffer6.byteLength);  // 8
const view6 = new Uint8Array(buffer6);
console.log(view6.length);  // 8 (truncated)

// transferToFixedLength - creates non-resizable buffer
const resizable = new ArrayBuffer(8, { maxByteLength: 32 });
const fixed = resizable.transferToFixedLength(16);

console.log(fixed.byteLength);      // 16
console.log(fixed.resizable);       // false
console.log(fixed.maxByteLength);   // 16 (same as byteLength)

Console Output

Click "Run Code" to see output here...

Example 2: Worker Communication with Zero-Copy Transfer

Efficiently transfer large buffers between workers

javascript

code

DarkEditable

// Main Thread
const largeBuffer = new ArrayBuffer(1024 * 1024 * 10);  // 10MB
const view = new Uint8Array(largeBuffer);

// Fill with data
for (let i = 0; i < view.length; i++) {
  view[i] = i % 256;
}

console.log('Main: Created buffer:', largeBuffer.byteLength);

// Create worker
const worker = new Worker('worker.js');

// Transfer buffer to worker (zero-copy!)
worker.postMessage(
  { buffer: largeBuffer },
  [largeBuffer]  // Transferable list
);

console.log('Main: Buffer transferred');
console.log('Main: Original buffer detached:', largeBuffer.byteLength);  // 0

// Original buffer is now unusable in main thread
// Worker has full ownership

// Worker Thread (worker.js)
self.onmessage = ({ data: { buffer } }) => {
  console.log('Worker: Received buffer:', buffer.byteLength);
  
  const view = new Uint8Array(buffer);
  
  // Process data
  let sum = 0;
  for (let i = 0; i < view.length; i++) {
    sum += view[i];
  }
  
  console.log('Worker: Processed data, sum:', sum);
  
  // Transfer back to main thread
  self.postMessage({ buffer, sum }, [buffer]);
  
  // Buffer is now detached in worker
  console.log('Worker: Buffer transferred back');
};

// Real-world: Image processing pipeline
class ImageProcessor {
  constructor() {
    this.worker = new Worker('image-worker.js');
  }
  
  async processImage(imageData) {
    // Create buffer from image data
    const buffer = new ArrayBuffer(imageData.length);
    const view = new Uint8Array(buffer);
    view.set(imageData);
    
    return new Promise((resolve) => {
      this.worker.onmessage = ({ data: { processedBuffer } }) => {
        const result = new Uint8Array(processedBuffer);
        resolve(result);
      };
      
      // Transfer to worker for processing
      this.worker.postMessage(
        { buffer, width: 1920, height: 1080 },
        [buffer]
      );
    });
  }
}

// Resizable buffer transfer
const growableBuffer = new ArrayBuffer(1024, {
  maxByteLength: 1024 * 1024  // Can grow up to 1MB
});

// Initially 1KB
console.log(growableBuffer.byteLength);     // 1024
console.log(growableBuffer.maxByteLength);  // 1048576

// Transfer and resize to 2KB
const transferred = growableBuffer.transfer(2048);

console.log(transferred.byteLength);      // 2048
console.log(transferred.maxByteLength);   // 1048576
console.log(transferred.resizable);       // true

// Memory-efficient buffer swapping
function swapBuffers(buffer1, buffer2) {
  // Transfer both buffers to new sizes if needed
  const newBuffer1 = buffer1.transfer();
  const newBuffer2 = buffer2.transfer();
  
  // Original buffers are now detached
  // New buffers can be used
  return [newBuffer2, newBuffer1];  // Swapped!
}

Console Output

Click "Run Code" to see output here...

Buffer States After Transfer

Property	Original Buffer	New Buffer
byteLength	0 (detached)	New size ✅
Usable	No ❌	Yes ✅
Data	Lost ❌	Preserved ✅
detached	true	false

Key Takeaways

⚡

Zero-Copy

Transfer ownership without copying data

🔒

Detached

Original buffer becomes unusable

📏

Resize

Optionally resize during transfer

💡

ES2024

Efficient buffer management

Previous Topic

Atomics.waitAsync

Non-blocking atomic operations for SharedArrayBuffer (ES2024).

Next Topic

Array flat/flatMap

Flattening nested arrays and mapping with flatMap.

Ask a Question

Have a question about ArrayBuffer Transfer? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript (ES2024)

ArrayBuffer Transfer

Transfer and resize ArrayBuffers efficiently!

Find videos you like?

Save to resource drawer for future reference!

What is ArrayBuffer Transfer?

Zero-Copy Performance!

Transfer ownership without copying data - extremely efficient for large buffers and worker communication!

🔄Transfer Methods

📦

transfer(newByteLength?)

Transfer with optional resize. Returns resizable ArrayBuffer.

🔒

transferToFixedLength(newByteLength?)

Transfer with optional resize. Returns fixed-length ArrayBuffer.

Example 1: Basic Transfer and Resize

Transfer ArrayBuffer ownership and resize

javascript

code

DarkEditable

// Create ArrayBuffer
const buffer1 = new ArrayBuffer(16);
const view1 = new Uint8Array(buffer1);
view1[0] = 42;
view1[1] = 99;

console.log(buffer1.byteLength);  // 16
console.log(view1[0]);            // 42

// Transfer to new buffer (same size)
const buffer2 = buffer1.transfer();

console.log(buffer2.byteLength);  // 16
console.log(buffer1.byteLength);  // 0 - DETACHED!

// Original buffer is now detached - can't use it
try {
  const view = new Uint8Array(buffer1);  // ❌ Error!
} catch (e) {
  console.log('Original buffer detached');
}

// New buffer has the data
const view2 = new Uint8Array(buffer2);
console.log(view2[0]);  // 42 ✅

// Transfer with resize (grow)
const buffer3 = new ArrayBuffer(8);
const view3 = new Uint8Array(buffer3);
view3[0] = 100;

const buffer4 = buffer3.transfer(16);  // Grow from 8 to 16

console.log(buffer4.byteLength);  // 16
console.log(buffer3.byteLength);  // 0 - detached

const view4 = new Uint8Array(buffer4);
console.log(view4[0]);   // 100 (preserved)
console.log(view4[15]);  // 0 (new space)

// Transfer with resize (shrink)
const buffer5 = new ArrayBuffer(16);
const view5 = new Uint8Array(buffer5);
for (let i = 0; i < 16; i++) view5[i] = i;

const buffer6 = buffer5.transfer(8);  // Shrink from 16 to 8

console.log(buffer6.byteLength);  // 8
const view6 = new Uint8Array(buffer6);
console.log(view6.length);  // 8 (truncated)

// transferToFixedLength - creates non-resizable buffer
const resizable = new ArrayBuffer(8, { maxByteLength: 32 });
const fixed = resizable.transferToFixedLength(16);

console.log(fixed.byteLength);      // 16
console.log(fixed.resizable);       // false
console.log(fixed.maxByteLength);   // 16 (same as byteLength)

Console Output

Click "Run Code" to see output here...

Example 2: Worker Communication with Zero-Copy Transfer

Efficiently transfer large buffers between workers

javascript

code

DarkEditable

// Main Thread
const largeBuffer = new ArrayBuffer(1024 * 1024 * 10);  // 10MB
const view = new Uint8Array(largeBuffer);

// Fill with data
for (let i = 0; i < view.length; i++) {
  view[i] = i % 256;
}

console.log('Main: Created buffer:', largeBuffer.byteLength);

// Create worker
const worker = new Worker('worker.js');

// Transfer buffer to worker (zero-copy!)
worker.postMessage(
  { buffer: largeBuffer },
  [largeBuffer]  // Transferable list
);

console.log('Main: Buffer transferred');
console.log('Main: Original buffer detached:', largeBuffer.byteLength);  // 0

// Original buffer is now unusable in main thread
// Worker has full ownership

// Resizable buffer transfer
const growableBuffer = new ArrayBuffer(1024, {
  maxByteLength: 1024 * 1024  // Can grow up to 1MB
});

// Initially 1KB
console.log(growableBuffer.byteLength);     // 1024
console.log(growableBuffer.maxByteLength);  // 1048576

// Transfer and resize to 2KB
const transferred = growableBuffer.transfer(2048);

console.log(transferred.byteLength);      // 2048
console.log(transferred.maxByteLength);   // 1048576
console.log(transferred.resizable);       // true

Console Output

Click "Run Code" to see output here...

Buffer States After Transfer

Property	Original Buffer	New Buffer
byteLength	0 (detached)	New size ✅
Usable	No ❌	Yes ✅
Data	Lost ❌	Preserved ✅
detached	true	false

Key Takeaways

⚡

Zero-Copy

Transfer ownership without copying data

🔒

Detached

Original buffer becomes unusable

📏

Resize

Optionally resize during transfer

💡

ES2024

Efficient buffer management

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Atomics.waitAsync

Array flat/flatMap

JavaScript Code Editor

Building Your Learning Module...

ArrayBuffer Transfer

What is ArrayBuffer Transfer?

Zero-Copy Performance!

transfer(newByteLength?)

transferToFixedLength(newByteLength?)

Example 1: Basic Transfer and Resize

Example 2: Worker Communication with Zero-Copy Transfer

Key Takeaways

Zero-Copy

Detached

Resize

ES2024

Atomics.waitAsync

Array flat/flatMap

JavaScript Code Editor

ArrayBuffer Transfer

What is ArrayBuffer Transfer?

Zero-Copy Performance!

transfer(newByteLength?)

transferToFixedLength(newByteLength?)

Example 1: Basic Transfer and Resize

Example 2: Worker Communication with Zero-Copy Transfer

Key Takeaways

Zero-Copy

Detached

Resize

ES2024