postMessage

Learn to send messages between the main thread and the worker.

Messaging with postMessage

Data flows between the main thread and the worker through postMessage(). This method copies the value with the structured clone algorithm, so objects, arrays and maps travel safely.

worker.postMessage({ numbers: [3, 1, 2] });

To reply from the worker to the main thread, call self.postMessage(). The message lands in a queue; the receiver picks it up with onmessage.

Replying with self.postMessage

To send data from the worker file back to the main thread, call self.postMessage(payload) or just postMessage(payload). self refers to the worker's global object.

self.postMessage({ sorted: [1, 2, 3] });

The message does not leave instantly; it is queued and processed when the main thread is free. After heavy work finishes, you send the result back this way. console.log output inside a worker does not reach the main thread.

Exercise Send an order to the worker

Send the object { order: 42, ready: true } to the worker with postMessage.

Show example solution

worker.postMessage({ order: 42, ready: true });

Test yourself

How does postMessage work?
- It passes the data by reference
- It copies the data with structured clone
- It only carries strings
- It carries data synchronously
Show answer

It copies the data with structured clone — Correct! postMessage copies the data with the structured clone algorithm.

Send an array to the worker

worker.postMessage({ numbers: ____ });

Show answer

worker.postMessage({ numbers: [5, 2, 8] });

postMessage matches

worker.postMessage()

main to worker
self.postMessage()

worker to main
structured clone

copies the data
onmessage

catches the message

Next lesson: Receiving data from a worker

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies