Suggest an edit

Improve this article

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

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`window.location` is a built-in browser object that stores and manages the **address of the current page (URL)**.
It lets you **get**, **change**, or **redirect** the user to another address.

---

## Definition

> `window.location` is an object representing the current URL in the browser's address bar.
> It is also known as `location`, since `window.` can be omitted.

---

## 1. Example: viewing the current URL

```javascript
console.log(window.location);
```

Example 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"
}
```

---

## 2. Main `window.location` properties

| Property | What it returns | Example |
|---|---|---|
| `href` | Full URL | `"https://example.com/path?page=1#info"` |
| `protocol` | Protocol | `"https:"` or `"http:"` |
| `host` | Domain + port | `"example.com"` or `"localhost:3000"` |
| `hostname` | Domain only | `"example.com"` |
| `port` | Port number | `"3000"` (if specified) |
| `pathname` | Path after the domain | `"/path/page.html"` |
| `search` | Query string (query params) | `"?page=1&sort=asc"` |
| `hash` | Anchor (the part after `#`) | `"#section"` |
| `origin` | Protocol + domain + port only | `"https://example.com"` |

---

## 3. Example: usage

```javascript
console.log(location.href);      // 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
```

---

## 4. Redirecting the user

You can change the page address in several ways

### Way 1: set `href` directly

```javascript
window.location.href = 'https://google.com';
```

A full redirect (the equivalent of clicking a link).

---

### Way 2: use the `assign()` method

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

Also redirects, but keeps the current page in the browser's history.
So the user can still click "Back".

---

### Way 3: use `replace()`

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

A redirect **without adding to history**,
the user won't be able to go back with the "<-" button.

---

### Way 4: reload the page

```javascript
window.location.reload(); // Refresh
window.location.reload(true); // (deprecated) force from the server
```

---

## 5. Example: 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"
```

---

## 6. Changing the hash (anchor)

```javascript
window.location.hash = '#about';
```

This **does not reload the page**, it just scrolls to the element with `id="about"`
or fires the `hashchange` event.

---

## Summary

| What it does | Example |
|---|---|
| Gets the current URL | `location.href` |
| Changes the page address | `location.href = 'https://...'` |
| Redirects while keeping history | `location.assign(url)` |
| Redirects without history | `location.replace(url)` |
| Refreshes the page | `location.reload()` |
| Gets query parameters | `location.search`, `URLSearchParams` |
| Changes the hash without reloading | `location.hash = '#id'` |

---

> **Keep it simple:**
> `window.location` is "JavaScript's address bar".
> With it you can:
>
> - find out where you are,
> - navigate where you need,
> - refresh the page,
> - or change part of the URL without reloading.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.