map VS object

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

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

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

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

1. Тип ключів

Особливість	`Object`	`Map`
Ключі	Тільки рядки або символи	Будь-які типи (рядки, числа, об'єкти, функції тощо)

Приклад:

javascript

const obj = {};
const map = new Map();

const keyObj = { id: 1 };

obj[keyObj] = "object value";
map.set(keyObj, "map value");

console.log(obj); // { "[object Object]": "object value" }
console.log(map.get(keyObj)); // "map value"

У об'єкті ключ перетворився на рядок "[object Object]", а в Map залишився справжнім об'єктом.

2. Збереження порядку

Особливість	`Object`	`Map`
Порядок ключів	Частково гарантований (ES6+)	Завжди зберігається

Map завжди повертає елементи у порядку вставки, а об'єкт може поводитися по-іншому з числовими ключами:

javascript

const obj = { 2: "b", 1: "a" };
console.log(Object.keys(obj)); // ["1", "2"] (числа сортуються)

javascript

const map = new Map([[2, "b"], [1, "a"]]);
console.log([...map.keys()]); // [2, 1] (порядок зберігається)

3. Легко дізнатися розмір

Особливість	`Object`	`Map`
Розмір	`Object.keys(obj).length`	`map.size`

javascript

const map = new Map([["a", 1], ["b", 2]]);
console.log(map.size); // 2

4. Продуктивність

Особливість	`Object`	`Map`
Часті вставки / видалення	Повільніше	Швидше
Ітерація по елементах	Незручно	Зручно через `for...of`

Map оптимізований спеціально під часті додавання, видалення і обхід.

5. Ітерованість

Особливість	`Object`	`Map`
Ітерується напряму	Ні	Так

javascript

const map = new Map([["x", 10], ["y", 20]]);
for (const [key, value] of map) {
  console.log(key, value);
}
// x 10
// y 20

Для об'єкта доведеться викликати Object.keys(), Object.entries() тощо.

6. Прототип і службові властивості

Особливість	`Object`	`Map`
Успадковує від `Object.prototype`	Так	Ні
Може конфліктувати з методами (`toString`, `hasOwnProperty`)	Так	Ні

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

7. Перетворення між ними

javascript

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

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

const backToObj = Object.fromEntries(map);
console.log(backToObj); // { a: 1, b: 2 }

Object.entries() і Object.fromEntries() дозволяють легко конвертувати туди і назад.

8. Коли що використовувати

Використовуй	Коли
`Object`	структура даних з фіксованими властивостями (наприклад, модель користувача)
`Map`	динамічні ключі, будь-які типи ключів, кеш, часті операції додавання/видалення

Коротко:

Особливість	`Object`	`Map`
Тип ключів	рядок / символ	будь-який тип
Порядок ключів	частково впорядкований	зберігається
Розмір	треба рахувати вручну	`.size`
Ітерованість	через `Object.keys()`	напряму (`for...of`)
Продуктивність	нижча	вища
Застосування	статичні дані	динамічні колекції

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

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

Premium

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