JavaScript Academy · Lesson

Transferable Objects

Move data efficiently without copying.

Lesson 3 of 413 steps

Transferable Objects is a free JavaScript Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Transferable Objects” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Transferable Objects”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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