Що таке Map?

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

Що таке Map

Map - це вбудований об'єкт у JavaScript, який зберігає пари "ключ → значення" і запам'ятовує порядок вставки цих пар.

Він схожий на звичайний об'єкт {}, але з розширеними можливостями:

може використовувати будь-який тип даних як ключ (зокрема об'єкти, функції, NaN);
має зручні методи для додавання, видалення та перебору;
зберігає порядок вставки елементів.

Приклад використання

javascript

const map = new Map();

map.set('name', 'Alex');
map.set('age', 25);

console.log(map.get('name')); // Alex
console.log(map.get('age'));  // 25
console.log(map.size);        // 2

Основні методи та властивості Map

Метод / властивість	Що робить	Приклад
`set(key, value)`	Додає елемент	`map.set('a', 1)`
`get(key)`	Повертає значення за ключем	`map.get('a')`
`has(key)`	Перевіряє наявність ключа	`map.has('a') // true`
`delete(key)`	Видаляє елемент	`map.delete('a')`
`clear()`	Очищає всю колекцію	`map.clear()`
`size`	Кількість елементів	`map.size // 2`

Приклад: різні типи ключів

javascript

const map = new Map();

const objKey = { id: 1 };
const funcKey = () => {};
const numKey = 42;

map.set(objKey, 'об\'єкт');
map.set(funcKey, 'функція');
map.set(numKey, 'число');

console.log(map.get(objKey)); // об'єкт
console.log(map.get(funcKey)); // функція
console.log(map.get(42)); // число

На відміну від звичайного об'єкта {}, ключі тут порівнюються за посиланням, а не за приведеною до рядка формою.

Приклад з NaN та об'єктами

javascript

const map = new Map();
map.set(NaN, 'Not a Number');
console.log(map.get(NaN)); // 'Not a Number'

Навіть NaN працює як ключ (у звичайних об'єктах це неможливо).

Перебір Map

Map - колекція, що ітерується, тому її можна обійти будь-якими способами:

1. for...of

javascript

const map = new Map([
  ['name', 'Alex'],
  ['age', 25],
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// name: Alex
// age: 25

2. Методи ітерації:

javascript

map.forEach((value, key) => {
  console.log(key, value);
});

3. Отримати ключі / значення / записи:

javascript

console.log([...map.keys()]);   // ['name', 'age']
console.log([...map.values()]); // ['Alex', 25]
console.log([...map.entries()]); // [['name','Alex'], ['age',25]]

Порівняння з об'єктом {}

Особливість	`Object`	`Map`
Тип ключів	Тільки рядок або символ	Будь-який тип (включно з об'єктами й функціями)
Порядок елементів	Не гарантований (до ES2015)	Гарантований
Кількість елементів	Потрібно рахувати вручну (`Object.keys().length`)	`map.size`
Видалення	`delete obj.key` (повільно)	`map.delete(key)` (швидко)
Перебір	`for...in` (з успадкованими властивостями)	Чистий `for...of`
Продуктивність	Краще для невеликих наборів даних	Краще для частих вставок/видалень

Перетворення між Map та об'єктом

З об'єкта → в Map:

javascript

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

З Map → в об'єкт:

javascript

const obj2 = Object.fromEntries(map);

Приклад практичного використання

Лічильник елементів, що зустрічаються:

javascript

const arr = ['a', 'b', 'a', 'c', 'b', 'a'];

const counter = new Map();

for (const item of arr) {
  counter.set(item, (counter.get(item) || 0) + 1);
}

console.log(counter); // Map(3) { 'a' => 3, 'b' => 2, 'c' => 1 }

Коли використовувати Map

Використовуй Map, якщо:

потрібно зберігати не лише рядки як ключі;
важливо зберігати порядок вставки;
потрібне часте додавання й видалення елементів;
ти працюєш з асоціативними структурами даних.

Коротке резюме

Що	Опис
Тип	Колекція "ключ-значення"
Ключі	Будь-які типи (включно з об'єктами)
Порядок	Зберігається
Методи	`.set()`, `.get()`, `.has()`, `.delete()`, `.clear()`
Розмір	`map.size`
Перебір	`for...of`, `.forEach()`, `.keys()`, `.values()`, `.entries()`

Простіше кажучи:

Map - це покращена версія об'єкта {} з нормальними методами, підтримкою будь-яких ключів і гарантованим порядком елементів.

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

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

Premium

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