JavaScript WorkerLocation host Property

What You’ll Learn

The host property of a WorkerLocation object returns the host part of the worker’s location. Learn self.location.host, how it relates to hostname and port, and what blob workers report—with five examples and try-it labs.

Introduction

Inside a Web Worker, self.location is a WorkerLocation for the worker script URL. host is the authority-style host string—usually hostname plus port when the port is shown (for example localhost:8080).

MDN’s classic example: for a worker on http://localhost:8080/, location.host returns "localhost:8080".

Understanding the host Property

A read-only instance property on WorkerLocation that returns the host part of the worker’s location as a string.

• Value — a string (for example "localhost:8080").
• vs hostname — host may include the port; hostname does not.
• Access — self.location.host or location.host inside the worker.
• Workers only — not available on the main document thread.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Read the property inside a worker script:

const result = location.host;
// e.g. "localhost:8080" on http://localhost:8080/

Value

A string.

Typical pattern (MDN idea)

// Inside a Web Worker on http://localhost:8080/
const result = location.host; // "localhost:8080"
self.postMessage(result);

⚖️ host vs Related Ideas

Examples Gallery

Examples follow MDN WorkerLocation.host. Labs use blob workers (host may be empty) and compare related URL parts.

// On http://localhost:8080/
const result = location.host; // "localhost:8080"
self.postMessage(result);

localhost:8080

self.postMessage({
  host: location.host,
  protocol: location.protocol,
  isEmpty: location.host === ""
});

host: ""
protocol: blob:
isEmpty: true

self.postMessage({
  host: location.host,
  hostname: location.hostname,
  port: location.port
});

host: localhost:8080
hostname: localhost
port: 8080

// Worker
self.postMessage(location.host);

// Main
worker.onmessage = (e) => {
  console.log("worker:", e.data);
  console.log("page:", location.host);
};

worker: ""
page: localhost:3002

const host = location.host;
self.postMessage({
  host,
  hasPortMarker: host.indexOf(":") !== -1
});

host: localhost:8080
hasPortMarker: true

🚀 Common Use Cases

• Log which host a dedicated worker script was loaded from.
• Branch behavior for local vs production hosts.
• Debug whether a worker is a blob URL (empty host) or http(s).
• Pair with hostname / port when building diagnostics.
• Compare worker host with the page host when investigating origin issues.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Only available in Web Workers (WorkerLocation / self.location).
• Read-only string; often empty for blob: worker URLs.
• Not the same object as window.location on the page.
• Related learning: hash, Worker(), postMessage().

💡 Best Practices