Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить window.location?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`window.location` - це вбудований об'єкт браузера, який зберігає й керує **адресою поточної сторінки (URL)**.
З його допомогою можна **отримати**, **змінити** або **перенаправити** користувача на іншу адресу.

---

## Визначення

> `window.location` - це об'єкт, що представляє поточний URL в адресному рядку браузера.
> Він також відомий як `location`, тому що `window.` можна опустити.

---

## 1. Приклад: перегляд поточного URL

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

Приклад виводу в консоль:

```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. Основні властивості `window.location`

| Властивість | Що повертає | Приклад |
|---|---|---|
| `href` | Повний URL | `"https://example.com/path?page=1#info"` |
| `protocol` | Протокол | `"https:"` або `"http:"` |
| `host` | Домен + порт | `"example.com"` або `"localhost:3000"` |
| `hostname` | Тільки домен | `"example.com"` |
| `port` | Номер порту | `"3000"` (якщо вказано) |
| `pathname` | Шлях після домену | `"/path/page.html"` |
| `search` | Рядок запиту (query params) | `"?page=1&sort=asc"` |
| `hash` | Якір (частина після `#`) | `"#section"` |
| `origin` | Тільки протокол + домен + порт | `"https://example.com"` |

---

## 3. Приклад: використання

```javascript
console.log(location.href);      // Повна адреса сторінки
console.log(location.hostname);  // example.com
console.log(location.pathname);  // /articles/js
console.log(location.search);    // ?id=42
console.log(location.hash);      // #comments
```

---

## 4. Перенаправлення користувача

Можна змінювати адресу сторінки кількома способами

### Спосіб 1: напряму змінити `href`

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

Повне перенаправлення (аналог кліку по посиланню).

---

### Спосіб 2: використати метод `assign()`

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

Теж перенаправляє, але зберігає поточну сторінку в історії браузера.
Тобто можна натиснути "Назад".

---

### Спосіб 3: використати `replace()`

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

Перенаправлення **без збереження в історії** -
користувач не зможе повернутися назад кнопкою "<-".

---

### Спосіб 4: перезавантажити сторінку

```javascript
window.location.reload(); // Оновити
window.location.reload(true); // (застаріле) примусово з сервера
```

---

## 5. Приклад: робота з query-параметрами

```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. Зміна hash (якоря)

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

Це **не перезавантажує сторінку**, а просто прокручує до потрібного елемента з `id="about"`
або викликає подію `hashchange`.

---

## Підсумок

| Що робить | Приклад |
|---|---|
| Отримує поточний URL | `location.href` |
| Змінює адресу сторінки | `location.href = 'https://...'` |
| Перенаправляє зі збереженням історії | `location.assign(url)` |
| Перенаправляє без історії | `location.replace(url)` |
| Оновлює сторінку | `location.reload()` |
| Дістає query-параметри | `location.search`, `URLSearchParams` |
| Змінює hash без перезавантаження | `location.hash = '#id'` |

---

> **Запам'ятай просто:**
> `window.location` - це "адресний рядок JavaScript".
> З ним можна:
>
> - дізнатися, де ти перебуваєш,
> - перейти куди потрібно,
> - оновити сторінку,
> - або змінити частину URL без перезавантаження.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати453 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.