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

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

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

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

Контент

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

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

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

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

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

Усі думають, що `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`) |
| Продуктивність | нижча | вища |
| Застосування | статичні дані | динамічні колекції |

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

Для рев’юера

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

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