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

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

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

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

Контент

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

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

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

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

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

`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` |

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

Для рев’юера

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

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