Ask any question about JavaScript here... and get an instant response.
Post this Question & Answer:
How can I safely pass data between a JavaScript function and a web worker without losing data integrity?
Asked on Jan 04, 2026
Answer
To safely pass data between a JavaScript function and a web worker, use the "postMessage" method for sending data and the "message" event listener for receiving data. This ensures data integrity through structured cloning.
<!-- BEGIN COPY / PASTE -->
// Main script
const worker = new Worker('worker.js');
// Send data to the worker
const dataToSend = { key: 'value' };
worker.postMessage(dataToSend);
// Receive data from the worker
worker.addEventListener('message', (event) => {
console.log('Received from worker:', event.data);
});
// Worker script (worker.js)
self.addEventListener('message', (event) => {
const receivedData = event.data;
// Process data and send back
const processedData = { ...receivedData, processed: true };
self.postMessage(processedData);
});
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with JavaScript best practices.- Use "postMessage" to send data from the main script to the worker and vice versa.
- The "message" event listener is used to receive data in both the main script and the worker.
- Data is transferred using structured cloning, which maintains data integrity without needing serialization like JSON.stringify.
- Ensure the worker script is in a separate file (e.g., "worker.js").
Recommended Links:
