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

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

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

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

Контент

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

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

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

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

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

**Пара «ключ-значення» (key-value), це основа зберігання даних в об'єктах JavaScript і в багатьох інших структурах: ключ, це ім'я властивості, а значення, це дані, що цьому імені відповідають.** Об'єкт, по суті, є набором таких пар, і кожна пара описує одну частину даних.

## Теорія

### TL;DR

- Ключ (key), це ім'я властивості, за яким можна звернутися до даних.
- Значення (value), це дані, пов'язані з цим ключем.
- Одна властивість об'єкта, це одна пара «ключ-значення».
- Ключі унікальні в межах об'єкта, повторне присвоєння перезаписує значення.
- Ключі об'єкта, це завжди рядки або `Symbol`, числа автоматично перетворюються на рядки.
- Доступ до значення: крапка (`user.name`), коли ім'я відоме, або дужки (`user[key]`), коли ключ у змінній.
- Ту саму модель використовують `Map`, `URLSearchParams`, `FormData` і формат JSON.

### Швидкий приклад

```javascript
const user = {
  name: 'Maria', // ключ -> значення
  age: 25,
  city: 'Kyiv'
};

console.log(user.name); // "Maria"
```

Тут `name`, `age`, `city`, це ключі (або «імена властивостей»), а `'Maria'`, `25`, `'Kyiv'`, це значення.

### Терміни

| Елемент | Опис |
| --- | --- |
| Ключ (key) | Ім'я властивості, за яким можна звернутися до даних |
| Значення (value) | Дані, пов'язані з цим ключем |
| Приклад | `{ "ключ": "значення" }` |
| Типовий формат зберігання | `{ name: 'Maria', age: 25 }` |

### Як працюють ключі

- Ключі завжди **унікальні** в межах одного об'єкта: якщо записати той самий ключ двічі, залишиться останнє значення.
- Зазвичай це **рядки** (або `Symbol`), навіть якщо ви пишете число:

```javascript
const obj = { 1: 'a', 2: 'b' };
console.log(Object.keys(obj)); // ["1", "2"]
```

Тобто числовий літерал `1` як ключ перетворюється на рядок `"1"`. Виняток, це `Symbol`: символьні ключі не перетворюються на рядки і не потрапляють у `Object.keys()`.

### Доступ до значення за ключем

```javascript
console.log(user.name);    // "Maria"
console.log(user['city']); // "Kyiv"
```

Доступ можливий:

- через **крапку**, якщо ім'я відоме заздалегідь;
- через **квадратні дужки**, якщо ключ зберігається у змінній або обчислюється.

```javascript
const key = 'age';
console.log(user[key]); // 25
```

Дужки також потрібні тоді, коли ключ не є коректним ідентифікатором, наприклад `user['first name']`.

### З чого складаються пари: Object.entries

Пари можна побачити у вигляді масиву:

```javascript
console.log(Object.entries(user));
```

Результат:

```javascript
[
  ['name', 'Maria'],
  ['age', 25],
  ['city', 'Kyiv']
]
```

Кожна пара, це `[ключ, значення]`. Поруч працюють `Object.keys(user)`, який поверне тільки ключі, і `Object.values(user)`, який поверне тільки значення.

### Де ще зустрічається принцип «ключ-значення»

| Структура | Приклад | Що зберігає |
| --- | --- | --- |
| `Object` | `{ name: 'Maria' }` | Ключі, це рядки або `Symbol` |
| `Map` | `map.set('role', 'admin')` | Ключі будь-якого типу, зокрема об'єкти |
| `URLSearchParams` | `?id=1&name=Maria` | Ключі та значення з рядка URL |
| `FormData` | `form.append('email', 'maria@example.com')` | Поля форми |

Той самий принцип лежить в основі JSON, HTTP-заголовків, змінних оточення і key-value сховищ на кшталт Redis.

### Типові помилки

- **Думати, що ключ зберігає тип.** Ключ об'єкта завжди приводиться до рядка, тому `obj[1]` і `obj['1']`, це одна й та сама властивість. Якщо потрібні ключі інших типів, беріть `Map`.
- **Плутати крапку і дужки.** `user.key` шукає властивість з іменем `"key"`, а не значення змінної `key`. Для змінної потрібні дужки: `user[key]`.
- **Перевіряти наявність ключа через значення.** Умова `if (user.age)` буде хибною для `0`, `''` і `null`. Правильно: `'age' in user` або `Object.hasOwn(user, 'age')`.
- **Дублювати ключі.** У літералі об'єкта повторений ключ мовчки перезаписує попередній, помилки не буде.
- **Очікувати, що `Object.keys()` покаже все.** Символьні ключі та властивості, що не перелічуються (non-enumerable), туди не потрапляють.

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

Для рев’юера

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

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