Suggest an edit

Improve this article

Refine the answer for “window.location”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

**`window.location` is a built-in browser object that holds the address of the current page (its URL) and lets you control it: read it, change it, or redirect the user somewhere else.** Its properties (`href`, `protocol`, `host`, `hostname`, `port`, `pathname`, `search`, `hash`, `origin`) break the URL into parts, and its methods drive navigation: `assign(url)` navigates and keeps an entry in history, `replace(url)` navigates without one (the Back button will not return), and `reload()` reloads the page. Assigning to `location.href` is equivalent to `assign()`. Changing `location.hash` does not reload the page, it only scrolls to the matching element and fires a `hashchange` event.

```javascript
console.log(location.hostname); // example.com
console.log(location.search);   // ?id=42

location.replace('https://example.com/logout'); // no history entry
```

**Key point:** `window.location` is "the address bar as an object": it reads the current URL and drives navigation, and `replace()` differs from `assign()` in that it leaves no history entry.

Shown above the full answer for quick recall.

Answer (EN)

**`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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts712 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.