JavaScript — Location

The location object

console.log(location.href);
// https://example.com/products?page=2#details

Every URL piece has its own property:

Property	Value for the URL above
protocol	https:
host	example.com
hostname	example.com (port stripped if default)
port	"" unless non-default
pathname	/products
search	?page=2 (includes the ?)
hash	#details
origin	https://example.com

Navigating

location.href = "https://example.com";       // go there (history entry kept)
location.assign("https://example.com");      // same thing, explicit

location.replace("https://example.com");     // NO back-entry to current page

location.reload();                           // refresh
location.hash = "#about";                    // in-page jump only

replace is ideal after logouts/redirects where Back should not return to a dead session page.

Reading query parameters properly

search includes the ?, so hand it straight to URLSearchParams:

const params = new URLSearchParams(location.search);

params.get("page");    // "2"
params.has("q");       // boolean
params.set("page", "3");

Building URLs safely

Never concatenate user input into URLs:

const url = new URL("https://example.com/search");
url.searchParams.set("q", "javascript & more");   // encoded automatically
url.href;   // https://example.com/search?q=javascript+%26+more

Hash navigation

Setting hash jumps to matching-id elements without reload — the JS side of anchor links.

SPA note

Single-page apps avoid location.href per route (full reloads) and use the History API instead — next lesson.

Security: never redirect with untrusted values: location.href = userInput enables open-redirect phishing. Validate destinations against an allowlist.

Mini Practice

1. Log every location property for the current page.
2. Read ?page= from the query string via URLSearchParams.
3. Change the hash; observe smooth/no-reload jump.
4. Compare assign vs replace behavior with the Back button.
5. Build a filtered search URL with URL + searchParams.

Next: history →