Messaging & structured cloning

Data crossing a boundary

Modern JavaScript is rarely alone. A page talks to an iframe. A window sends work to a worker. A settings tab tells every other open tab that the theme changed. Those messages need a safe way to carry data across a boundary without sharing the same object by reference.

The browser solves that with the structured clone algorithm. It is the set of rules behind structuredClone(), postMessage(), MessagePort, BroadcastChannel, IndexedDB values, and worker messages. It copies many real JavaScript data types, preserves cycles, and can also transfer ownership of some binary objects instead of copying them.

This lesson sits between Windows, iframes & postMessage and Web Components in the curriculum. Those neighboring lessons are text-only in this batch, so this one focuses on the shared data-moving rules you will use in both windows and workers.

structuredClone(value) deep-copies a value using browser messaging rules. Compared with JSON, it keeps many JavaScript-specific types: Date, Map, Set, RegExp, ArrayBuffer, typed arrays, Blob, File, common Error objects, and circular references.

It is still a data copier, not a magic duplicator of everything. It does not preserve custom prototypes, property descriptors, accessor functions, or methods from your own class instances. It reads own enumerable properties, stores their current values, and rebuilds supported built-ins on the other side.

1const original = makeValue(choice);2const copy = structuredClone(original);3inspect(copy);

Try the class instance and getter options. The class example keeps its own fields but loses its method because the prototype was not shipped. The getter example runs the getter once and stores the returned number as a regular value. That is very different from copying a live accessor.

The rule of thumb is: data can travel; behavior and live host objects usually cannot. A function closes over a scope. A DOM node is attached to a document. A symbol represents identity. A WeakMap depends on garbage-collection reachability. The clone algorithm refuses these with a DataCloneError instead of pretending it copied them.

One small built-in surprise: RegExp objects clone, but lastIndex is reset to 0. If you are mid-way through a global regular-expression search, do not rely on the clone continuing from the same spot.

MessageChannel creates two linked MessagePort objects: port1 and port2. Posting a message on one port delivers it to the other. You can keep one port and transfer the other to a worker or iframe, creating a private line that does not rely on global window message listeners.

1const channel = new MessageChannel();2channel.port1.onmessage = (event) => log("port1", event.data);3channel.port1.start();4iframe.contentWindow.postMessage("connect", "*", [channel.port2]);5channel.port1.postMessage("hello iframe");

The lab uses both styles you will see in real code. The parent uses addEventListener("message", ...), so it calls port.start(). The iframe uses port.onmessage = ..., which starts delivery automatically in browsers. Calling start() anyway is harmless and often makes the intent clear.

BroadcastChannel is for announcements, not private conversations. Every browsing context on the same origin that opens a channel with the same name can hear messages from the others: tabs, windows, iframes, and workers. The object that sends a message does not receive its own message.

1const a = new BroadcastChannel("lesson-room");2const b = new BroadcastChannel("lesson-room");3const c = new BroadcastChannel("lesson-room");4b.onmessage = (event) => log("B heard " + event.data);5c.onmessage = (event) => log("C heard " + event.data);6a.postMessage("standup at 10");

Try opening this lesson in another tab after creating the channels. BroadcastChannel is one of the few experiments here that becomes more fun with two tabs, because the second tab is another same-origin listener.

Copying makes independent data on both sides. Transferring moves ownership of a transferable object. The clearest example is ArrayBuffer. After transfer, the sender’s buffer is detached; its byteLength becomes 0, and the receiver owns the bytes.

1const buffer = new ArrayBuffer(8);2const copy = structuredClone(buffer);3console.log(buffer.byteLength, copy.byteLength);4 5const moved = structuredClone(buffer, { transfer: [buffer] });6console.log(buffer.byteLength, moved.byteLength);

Transfer lists appear in two places you will use often: structuredClone(value, { transfer: [buffer] }) and port.postMessage(value, [buffer]). They are perfect for large images, audio chunks, or binary protocol frames when the sender is done with the data.

postMessage returns immediately. The receiving message event runs later, after the current task finishes. That timing connects this lesson to the Event loop lesson: posting a message schedules work; it does not pause the current line of code and jump to the handler.

1const { port1, port2 } = new MessageChannel();Run2const buffer = new ArrayBuffer(4);3 4port1.onmessage = (event) => {5  console.log("message event:", event.data.byteLength);6};7 8port2.postMessage(buffer);9console.log("after postMessage:", buffer.byteLength);

The setting changes one visible line. In copy mode, line 9 sees the sender’s buffer still attached. In transfer mode, line 8 detaches the sender immediately, so line 9 logs 0. In both modes, the receiver’s event appears later and sees the four bytes.

These APIs show up whenever a web app splits work across places: a canvas sends pixels to a worker, an iframe receives a private reply port, a settings page tells other tabs to refresh, or a worker returns parsed data without blocking the main interface.

1const worker = new Worker("image-worker.js", { type: "module" });2const pixels = canvasBuffer;3 4worker.postMessage(5  { job: "blur", width, height, pixels },6  [pixels],7);8 9worker.onmessage = (event) => {10  drawPixels(event.data.pixels);11};

The important design choice is visible on lines 3–6. The message object carries ordinary metadata by copy, while the big pixel buffer is in the transfer list. The main page should not read that buffer after sending it; ownership moved to the worker. When the worker finishes, it can transfer a new buffer back.

Common misconceptions

Each answer explains the rule it tests. Read the explanations for wrong answers too; they are the common bugs.

Key takeaways

• structuredClone deep-copies many data values that JSON cannot, including Date, Map, Set, typed arrays, Error objects, and cycles.
• It refuses behavior and live objects such as functions, DOM nodes, symbols, WeakMap, and WeakSet.
• Your own class instances arrive as plain enumerable data; prototypes, methods, accessors, and descriptors are not preserved.
• MessageChannel gives two private ports; BroadcastChannel announces to same-origin listeners with the same name.
• A transfer list moves ownership. For ArrayBuffer, the sender’s byteLength becomes 0.

Up next: Web Components, where custom elements, Shadow DOM, templates, and slots help you build reusable pieces of interface.