Пари ключ-значення

JavaScriptJunior~2 хв читання

Пара «ключ-значення» (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), туди не потрапляють.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.