JavaScript Academy · Lesson

Transferable Objects

Move data efficiently without copying.

Transferable Objects is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Cost of Cloning

Structured cloning copies data byte by byte. For large buffers (images, audio, big arrays) this copy is slow and doubles memory use. Transferable objects solve this by moving ownership instead of copying.

What Can Be Transferred

Only certain object types are transferable, most importantly ArrayBuffer. Others include MessagePort, ImageBitmap, and OffscreenCanvas.

ArrayBuffer — raw binary memory
MessagePort — a channel endpoint
ImageBitmap — decoded image data

The Transfer List

postMessage accepts a second argument: a list of transferable objects. Objects in that list are moved, not copied.

const buffer = new ArrayBuffer(1024 * 1024); // 1 MB
worker.postMessage(buffer, [buffer]); // transfer it

Ownership Moves

After transfer, the sending side can no longer use the buffer; it becomes detached (byteLength 0). The receiving side now owns the same underlying memory, no copy made.

const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - now detached

Transferring Typed Arrays

You transfer the underlying ArrayBuffer of a typed array via its .buffer property. The view itself is not transferable, but its buffer is.

const data = new Float64Array(100000);
worker.postMessage(data, [data.buffer]);
// data is now detached on this side.

Receiving a Transfer

The receiving side reads the transferred object from event.data exactly like a cloned message. The difference is purely that no copy occurred.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data; // we now own this memory
  const view = new Uint8Array(buffer);
  view[0] = 255;
};

Sending Results Back

The worker can transfer the buffer back after processing, again with zero copy, returning ownership to the main thread.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data;
  // ...process the bytes...
  self.postMessage(buffer, [buffer]); // transfer back
};

Transfer vs Clone Performance

For a few kilobytes the difference is negligible. For megabytes of binary data, transfer is dramatically faster and avoids a memory spike. Reach for it on large buffers.

Avoiding Use-After-Transfer Bugs

A common mistake is reading the buffer after transferring it. Always treat the buffer as gone once it appears in the transfer list.

worker.postMessage(buffer, [buffer]);
// BUG: buffer is detached here; this reads zero length.
// const len = buffer.byteLength; // 0

Combining Cloned and Transferred Data

You can send an object that contains a buffer and transfer only that buffer. The object is cloned; the listed buffer is moved.

const msg = { type: 'frame', pixels: buffer };
worker.postMessage(msg, [buffer]);
// msg.type is cloned; buffer is transferred.

When to Use Transfer

Use transferable objects for image/audio/video processing, large numeric computations, and any pipeline moving big binary blobs between threads. For small JSON-like data, plain cloning is simpler and fine.

Quick Check

Test your understanding of transferable objects.

Recap

You learned transferable objects:

Pass a transfer list as the second arg to postMessage.
ArrayBuffer (and a few others) move instead of copying.
The sender's buffer becomes detached afterward.
Transfer a typed array via its .buffer.
Use it for large binary data; clone for small data.

Next, worker use cases and limitations.

Frequently asked questions

Is the “Transferable Objects” lesson free?

Yes — the full text of “Transferable Objects” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Transferable Objects”?

Move data efficiently without copying. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Transferable Objects” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy