window.location

JavaScriptJunior~3 min read

window.location is the object that represents the current URL in the browser's address bar, and at the same time a navigation tool. It is also known simply as location, because the window. prefix can be omitted.

Theory

TL;DR

window.location holds the address of the current page and lets you control it.
Reading: href, protocol, host, hostname, port, pathname, search, hash, origin.
Navigating: assigning to location.href, location.assign(url), location.replace(url).
replace() leaves no history entry, so the Back button will not work.
location.reload() reloads the page.
Query parameters are best parsed with new URLSearchParams(location.search).
Changing location.hash does not reload the page and fires a hashchange event.

Quick example

javascript

console.log(window.location);

Sample console output:

javascript

Location {
  href: "https://example.com/path/page.html?user=123#section",
  protocol: "https:",
  host: "example.com",
  pathname: "/path/page.html",
  search: "?user=123",
  hash: "#section"
}

The main properties

Property	What it returns	Example
`href`	The full URL	`"https://example.com/path?page=1#info"`
`protocol`	The protocol	`"https:"` or `"http:"`
`host`	Domain and port	`"example.com"` or `"localhost:3000"`
`hostname`	Domain only	`"example.com"`
`port`	Port number	`"3000"`, when present
`pathname`	Path after the domain	`"/path/page.html"`
`search`	Query string	`"?page=1&sort=asc"`
`hash`	The anchor (the part after `#`)	`"#section"`
`origin`	Protocol, domain and port only	`"https://example.com"`

In practice it looks like this:

javascript

console.log(location.href);      // the full page address
console.log(location.hostname);  // example.com
console.log(location.pathname);  // /articles/js
console.log(location.search);    // ?id=42
console.log(location.hash);      // #comments

Redirecting the user

There are several ways to change the page address.

Way 1: assign to href directly

javascript

window.location.href = 'https://example.com/dashboard';

A full redirect, the equivalent of clicking a link.

Way 2: the assign() method

javascript

window.location.assign('https://example.com/login');

It also redirects, but keeps the current page in the browser history. That means the user can press Back.

Way 3: the replace() method

javascript

window.location.replace('https://example.com/logout');

A redirect with no history entry, the user cannot go back with the browser button.

Way 4: reload the page

javascript

window.location.reload(); // reload
window.location.reload(true); // (deprecated) force a fetch from the server

Working with query parameters

javascript

console.log(window.location.search); // "?user=42&theme=dark"

const params = new URLSearchParams(window.location.search);
console.log(params.get('user')); // "42"
console.log(params.get('theme')); // "dark"

URLSearchParams handles decoding for you, so there is no need to split the string on & and = by hand.

Changing the hash

javascript

window.location.hash = '#about';

This does not reload the page, it simply scrolls to the element with id="about" or fires a hashchange event. Hash based navigation in older SPAs was built exactly on this.

Summary

What it does	Example
Gets the current URL	`location.href`
Changes the page address	`location.href = 'https://example.com'`
Redirects and keeps history	`location.assign(url)`
Redirects without history	`location.replace(url)`
Reloads the page	`location.reload()`
Reads query parameters	`location.search`, `URLSearchParams`
Changes the hash without a reload	`location.hash = '#id'`

In short: window.location is "the address bar of JavaScript". With it you can find out where you are, go where you need, reload the page, or change part of the URL without a reload.

Common mistakes

Confusing assign() with replace(). After replace() the Back button will not return the user to the previous page, which is why it is used for logout and post payment redirects, not for ordinary navigation.
Slicing location.search by hand. split('&') breaks on encoded values and on empty parameters, that is what URLSearchParams is for.
Mixing up host and hostname. host includes the port (localhost:3000), hostname does not (localhost).
Using location.href = ... inside an SPA. That is a full application reload, internal navigation needs history.pushState() or the framework router.
Relying on location.reload(true). The argument is deprecated and modern browsers ignore it, cache busting is done with headers or a version parameter in the URL.
Writing user supplied data into location without validation. That is an open redirect: the address must be checked against an allowlist, or reduced to a relative path.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.