Suggest an edit

Improve this article

Refine the answer for “What is Map?”. 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)

`Map` is a **built-in data structure in JavaScript**
that stores **"key -> value" pairs**, like an object,
but with a number of **powerful advantages**.

## The main idea:

`Map` is like an object `{}`, but:

- a key can be **any data type** (including objects and functions);
- the **order in which elements were added** is preserved;
- it is easy to know the number of entries (`size`);
- you can **iterate** over values, keys, and pairs.

## Creating a 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 methods

| Method | Description | Example |
| --- | --- | --- |
| `set(key, value)` | add or update a pair | `map.set("x", 10)` |
| `get(key)` | get a value | `map.get("x") // 10` |
| `has(key)` | check if a key exists | `map.has("x") // true` |
| `delete(key)` | remove an element | `map.delete("x")` |
| `clear()` | clear the whole collection | `map.clear()` |
| `size` | number of elements | `map.size // 3` |

## Example of usage:

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

## Keys can be anything!

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

> In regular objects (`{}`) keys always get converted to strings.
> In `Map` they **keep their type**.

## Iterating a Map

`Map` is an iterable structure, so you can use different loops.

### `for...of`

```javascript
for (const [key, value] of map) {
  console.log(key, value);
}
```

### `forEach`

```javascript
map.forEach((value, key) => {
  console.log(`${key} -> ${value}`);
});
```

### Getting all keys, values, and pairs:

```javascript
console.log([...map.keys()]);   // ["name", "age"]
console.log([...map.values()]); // ["Alice", 25]
console.log([...map.entries()]); // [["name", "Alice"], ["age", 25]]
```

## Comparison with an `{}` object

| Property | `Object` | `Map` |
| --- | --- | --- |
| Key type | only strings and symbols | any value |
| Key order | not fully guaranteed | insertion order preserved |
| Size (`length`) | must be counted manually | `.size` property |
| Iterability | needs `Object.keys()` etc. | iterated directly |
| Performance | worse with frequent insertions/deletions | faster with many operations |
| Prototype | has one (`Object.prototype`) | none - a "clean" collection |

## Practical usage example

### Caching data:

```javascript
const cache = new Map();

function getUser(id) {
  if (cache.has(id)) {
    return cache.get(id); // return from cache
  }

const user = { id, name: "User" + id }; // suppose this is a request
  cache.set(id, user);
  return user;
}
```

### Linking data to objects:

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

Here `Map` lets you "attach" data to objects,
which is impossible with regular `{}` objects.

## Briefly:

| Property | Description |
| --- | --- |
| Stores pairs | "key -> value" |
| Key type | any |
| Order | preserved |
| Can be iterated | Yes |
| Key uniqueness | Yes |
| Methods | `set`, `get`, `has`, `delete`, `clear` |
| Size | `.size` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.