Suggest an edit

Improve this article

Refine the answer for “What is Map in TypeScript?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What `Map` is

> `Map<K, V>` is a data structure that stores **key-value pairs**
> and remembers **the order in which elements were added**.

Unlike a regular `{}` object, keys in a `Map` can be of **any type**, not only strings.

---

### Example

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

> Here `string` is the key type, `number` is the value type.
> `map.get("bananas")` returns `number | undefined`,
> because the element might be missing.

---

## 2. Syntax with generic parameters

The type is declared as:

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

Examples:

```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. Basic `Map` methods

| Method | What it does | Example |
|---|---|---|
| `.set(key, value)` | Add or update an element | `map.set("x", 1)` |
| `.get(key)` | Get a value | `map.get("x")` -> `1` |
| `.has(key)` | Check if a key exists | `map.has("x")` -> `true` |
| `.delete(key)` | Remove an element | `map.delete("x")` |
| `.clear()` | Clear the Map | `map.clear()` |
| `.size` | Number of elements | `map.size` |

---

### Usage example

```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. Iterating a `Map`

A `Map` can be iterated in several ways:

```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}`);
});

// keys only
for (const key of users.keys()) console.log(key);

// values only
for (const value of users.values()) console.log(value);
```

---

## 5. Typing with objects and custom types

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

> Unlike `Record`, `Map` lets you use **objects as keys**.

---

## 6. Creating a `Map` with initial data

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

> We pass an array of `[key, value]` pairs.
> TypeScript infers the types automatically.

---

## 7. An immutable (readonly) map

If you need to forbid changes:

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

// roles.set(3, "guest"); Error
```

or via `ReadonlyMap<K, V>`:

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

---

## 8. Differences between `Map` and `Object` / `Record`

| Property | `Object` / `Record` | `Map` |
|---|---|---|
| Keys | only `string` or `symbol` | **any type** (including objects, numbers, functions) |
| Order of elements | not guaranteed | **preserves insertion order** |
| Getting the size | `Object.keys(obj).length` | `.size` |
| Iteration | manually via `for...in` | built-in iteration (`for...of`, `.forEach`) |
| Performance with many elements | lower | **higher** |
| Typing in TS | via `Record<K,V>` | via `Map<K,V>` |

---

### Comparison example

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

> But `Map` has `.has()`, `.size`, and can use an object as a key:
>
> ```javascript
> const key = { id: 1 };
> map.set(key, 123); // fine
> ```

---

## Summary

> `Map<K, V>` is a collection of key-value pairs with any key type and a guaranteed order.
>
> The basics:
>
> - Keys can be of **any type** (unlike objects).
> - Uses the **generic syntax** `Map<KeyType, ValueType>`.
> - Fast lookup and iteration.
> - Often used instead of `Record` for dynamic or non-static keys.
>
> Typing:
>
> ```javascript
> const map: Map<string, number> = new Map();
> ```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts690 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.