Що таке Map?

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

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

Головна ідея:

Map - це як об'єкт {}, але:

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

Створення Map:

javascript

const map = new Map();

map.set("name", "Alice");
map.set("age", 25);
map.set({ id: 1 }, "User Object");

console.log(map);
// Map(3) { 'name' => 'Alice', 'age' => 25, { id: 1 } => 'User Object' }

Методи Map

Метод	Опис	Приклад
`set(key, value)`	додати або оновити пару	`map.set("x", 10)`
`get(key)`	отримати значення	`map.get("x") // 10`
`has(key)`	перевірити наявність ключа	`map.has("x") // true`
`delete(key)`	видалити елемент	`map.delete("x")`
`clear()`	очистити всю колекцію	`map.clear()`
`size`	кількість елементів	`map.size // 3`

Приклад роботи:

javascript

const userData = new Map();

userData.set("name", "Tim");
userData.set("role", "Admin");

console.log(userData.get("name")); // Tim
console.log(userData.has("role")); // true
console.log(userData.size);        // 2

Ключі можуть бути будь-якими!

javascript

const map = new Map();

const objKey = { id: 1 };
const funcKey = function () {};
const numKey = 123;

map.set(objKey, "Object as key");
map.set(funcKey, "Function as key");
map.set(numKey, "Number as key");

console.log(map.get(objKey)); // "Object as key"
console.log(map.get(funcKey)); // "Function as key"

У звичайних об'єктах ({}) ключі завжди перетворюються на рядки. У Map вони зберігають свій тип.

Перебір Map

Map - ітерована структура, можна використовувати різні цикли.

`for...of`

javascript

for (const [key, value] of map) {
  console.log(key, value);
}

`forEach`

javascript

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

Отримання всіх ключів, значень і пар:

javascript

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

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

Властивість	`Object`	`Map`
Тип ключів	лише рядки та символи	будь-які значення
Порядок ключів	не гарантується повністю	зберігається порядок вставки
Розмір (`length`)	потрібно рахувати вручну	властивість `.size`
Ітерованість	потрібні `Object.keys()` тощо	ітерується напряму
Продуктивність	гірша при частих вставках/видаленнях	швидша при великій кількості операцій
Прототип	є (`Object.prototype`)	немає - "чиста" колекція

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

Кешування даних:

javascript

const cache = new Map();

function getUser(id) {
  if (cache.has(id)) {
    return cache.get(id); // повернути з кешу
  }

  const user = { id, name: "User" + id }; // припустимо, запит
  cache.set(id, user);
  return user;
}

Зв'язок між об'єктами:

javascript

const userRoles = new Map();

const alice = { name: "Alice" };
const bob = { name: "Bob" };

userRoles.set(alice, "admin");
userRoles.set(bob, "editor");

console.log(userRoles.get(alice)); // "admin"

Тут Map дозволяє "прив'язати" дані до об'єктів - що в звичайних об'єктах {} неможливо.

Коротко:

Властивість	Опис
Зберігає пари	"ключ -> значення"
Тип ключів	будь-який
Порядок	зберігається
Можна перебирати	Так
Унікальність ключів	Так
Методи	`set`, `get`, `has`, `delete`, `clear`
Розмір	`.size`

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

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

Premium

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