JavaScript Worker Constructor

What You’ll Learn

The Worker() constructor creates a dedicated Worker that runs a classic script or module at a URL on a background thread. Learn url rules, type / name options, blob URLs for demos, and messaging with postMessage—with five examples and try-it labs.

Introduction

Heavy work on the main thread can freeze clicks and scrolling. A dedicated worker runs JavaScript in parallel. You start it with new Worker(url), send data with worker.postMessage(...), and listen with worker.onmessage (or addEventListener("message")).

The worker script must usually be same-origin with your page (or a blob: / data: URL). In these tutorials we often build a small script as a Blob so the demo works in one HTML file.

Understanding the Worker() Constructor

A Web API constructor that returns a Worker object running the script or module at url.

• url — string or TrustedScriptURL; same-origin, or blob: / data:.
• options.type — "classic" (default) or "module".
• options.name — debug name for the worker scope.
• options.credentials — for module workers: omit, same-origin (default), or include.
• Baseline Widely available on MDN (since July 2015); some parts may vary. Available in Web Workers except Service Workers.

📝 Syntax

new Worker(url)
new Worker(url, options)

Parameters

Return value

A new Worker object.

Classic worker (file)

const myWorker = new Worker("worker.js");
// or explicitly:
const classic = new Worker("worker.js", { type: "classic" });

Module worker

const moduleWorker = new Worker("worker_module.js", {
  type: "module"
});

Blob URL pattern (single-page demos)

const code = `
  self.onmessage = (e) => {
    self.postMessage(e.data);
  };
`;
const blob = new Blob([code], { type: "application/javascript" });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);

⚖️ Worker() vs Related Ideas

Examples Gallery

Examples follow MDN Worker: Worker(). Labs use blob URLs so they run in one HTML document.

const code = `
  self.onmessage = (e) => self.postMessage("echo: " + e.data);
`;
const url = URL.createObjectURL(
  new Blob([code], { type: "application/javascript" })
);
const worker = new Worker(url);

worker.onmessage = (e) => console.log(e.data);
worker.postMessage("hello");

echo: hello

const code = `self.onmessage = () => self.postMessage(self.name);`;
const url = URL.createObjectURL(
  new Blob([code], { type: "application/javascript" })
);
const worker = new Worker(url, { name: "math-worker" });

worker.onmessage = (e) => console.log(e.data); // "math-worker"
worker.postMessage(null);

math-worker

const code = `
  self.onmessage = (e) => {
    self.postMessage(Number(e.data) * 2);
  };
`;
const worker = new Worker(
  URL.createObjectURL(new Blob([code], { type: "application/javascript" }))
);

worker.onmessage = (e) => console.log("result =", e.data);
worker.postMessage(21);

result = 42

const code = `throw new Error("boom");`;
const worker = new Worker(
  URL.createObjectURL(new Blob([code], { type: "application/javascript" }))
);

worker.onerror = (err) => {
  console.log("worker error:", err.message);
  err.preventDefault(); // stop the browser default error UI where supported
};

worker error: boom

const url = URL.createObjectURL(
  new Blob([`self.onmessage = (e) => self.postMessage(e.data);`], {
    type: "application/javascript"
  })
);
const worker = new Worker(url);

worker.onmessage = (e) => {
  console.log(e.data);
  worker.terminate();
  URL.revokeObjectURL(url);
};
worker.postMessage("done");

done

🚀 Common Use Cases

• Heavy math, sorting, or parsing without freezing the UI.
• Image / audio processing in the background.
• Keeping network + decode work off the main thread.
• Teaching concurrency with a simple message API.
• Bundler apps: new Worker(new URL("worker.js", import.meta.url)).

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner. Some parts may vary.
• Available in Web Workers except Service Workers.
• Script URL is an injection sink—treat untrusted URLs carefully; prefer CSP + Trusted Types.
• Prefer blob: over data: when you generate worker source (same-origin inheritance).
• Related learning: JavaScript hub, addEventListener(), Event().

💡 Best Practices