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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке `Map`

> `Map<K, V>` - це структура даних, яка зберігає **пари ключ-значення**
> і запам'ятовує **порядок додавання елементів**.

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

---

### Приклад

```javascript
const map = new Map<string, number>();

map.set("apples", 5);
map.set("bananas", 10);

console.log(map.get("apples")); // 5
console.log(map.size);          // 2
```

> Тут `string` - тип ключа, `number` - тип значення.
> `map.get("bananas")` поверне `number | undefined`,
> тому що елемент може бути відсутнім.

---

## 2. Синтаксис з generic-параметрами

Тип оголошується як:

```javascript
Map<KeyType, ValueType>
```

Приклади:

```javascript
const userRoles: Map<number, string> = new Map();
userRoles.set(1, "admin");
userRoles.set(2, "user");
```

або

```javascript
const dictionary: Map<string, string[]> = new Map();
dictionary.set("frontend", ["React", "TypeScript", "CSS"]);
```

---

## 3. Основні методи `Map`

| Метод | Що робить | Приклад |
|---|---|---|
| `.set(key, value)` | Додати або оновити елемент | `map.set("x", 1)` |
| `.get(key)` | Отримати значення | `map.get("x")` -> `1` |
| `.has(key)` | Перевірити наявність ключа | `map.has("x")` -> `true` |
| `.delete(key)` | Видалити елемент | `map.delete("x")` |
| `.clear()` | Очистити Map | `map.clear()` |
| `.size` | Кількість елементів | `map.size` |

---

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

```javascript
const points = new Map<string, number>();

points.set("Alice", 10);
points.set("Bob", 20);

console.log(points.has("Bob"));  // true
console.log(points.get("Bob"));  // 20

points.delete("Alice");
console.log(points.size);        // 1
```

---

## 4. Перебір `Map`

`Map` можна перебирати різними способами:

```javascript
const users = new Map<number, string>([
  [1, "Tim"],
  [2, "Max"],
  [3, "Bob"],
]);

// for...of
for (const [id, name] of users) {
  console.log(id, name);
}

// forEach
users.forEach((name, id) => {
  console.log(`${id}: ${name}`);
});

// тільки ключі
for (const key of users.keys()) console.log(key);

// тільки значення
for (const value of users.values()) console.log(value);
```

---

## 5. Типізація з об'єктами і кастомними типами

```javascript
interface User {
  id: number;
  name: string;
}

const userScores = new Map<User, number>();

const tim: User = { id: 1, name: "Tim" };
const max: User = { id: 2, name: "Max" };

userScores.set(tim, 100);
userScores.set(max, 80);

console.log(userScores.get(tim)); // 100
```

> На відміну від `Record`, `Map` дозволяє використовувати **об'єкти як ключі**.

---

## 6. Створення `Map` з початковими даними

```javascript
const cities = new Map<string, number>([
  ["Berlin", 3645000],
  ["Paris", 2140000],
  ["Tokyo", 13900000],
]);
```

> Передаємо масив пар `[ключ, значення]`.
> TypeScript автоматично виведе типи.

---

## 7. Незмінна (readonly) карта

Якщо потрібно заборонити зміни:

```javascript
const roles = new Map<number, string>([
  [1, "admin"],
  [2, "user"],
]) as const;

// roles.set(3, "guest"); Помилка
```

або через `ReadonlyMap<K, V>`:

```javascript
const roles: ReadonlyMap<number, string> = new Map([
  [1, "admin"],
  [2, "user"],
]);
```

---

## 8. Відмінності `Map` від `Object` і `Record`

| Властивість | `Object` / `Record` | `Map` |
|---|---|---|
| Ключі | тільки `string` або `symbol` | **будь-які типи** (включно з об'єктами, числами, функціями) |
| Порядок елементів | не гарантований | **зберігає порядок вставки** |
| Отримання розміру | `Object.keys(obj).length` | `.size` |
| Ітерація | вручну через `for...in` | вбудована ітерація (`for...of`, `.forEach`) |
| Продуктивність при великій кількості елементів | нижче | **вище** |
| Типізація в TS | через `Record<K,V>` | через `Map<K,V>` |

---

### Приклад порівняння

```javascript
const obj: Record<string, number> = { apples: 10, bananas: 5 };
const map: Map<string, number> = new Map([
  ["apples", 10],
  ["bananas", 5],
]);

obj["oranges"] = 7;
map.set("oranges", 7);
```

> Але `Map` має `.has()`, `.size` і може використовувати об'єкт як ключ:
>
> ```javascript
> const key = { id: 1 };
> map.set(key, 123); // добре
> ```

---

## Підсумок

> `Map<K, V>` - колекція пар ключ-значення з будь-якими типами ключів і гарантією порядку.
>
> Основне:
>
> - Ключі можуть бути **будь-якого типу** (на відміну від об'єктів).
> - Використовує **generic-синтаксис** `Map<KeyType, ValueType>`.
> - Швидка перевірка й ітерація.
> - Часто застосовується замість `Record` для динамічних або нестатичних ключів.
>
> Типізація:
>
> ```javascript
> const map: Map<string, number> = new Map();
> ```

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

Для рев’юера

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

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