Suggest an edit

Improve this article

Refine the answer for “map VS object”. 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)

Everyone thinks `Map` and a regular object `{}` are almost the same thing,
but in reality there are **significant differences** between them.
Let's break it down point by point.

## The main idea:

- `Object` is a "general-purpose data structure" for storing an object's **properties**, whose keys are **strings or symbols**.
- `Map` is a **specialized collection** for storing "key -> value" pairs with keys of **any type**, preserving insertion order.

## 1. Key type

| Feature | `Object` | `Map` |
|---|---|---|
| Keys | Only strings or symbols | Any type (strings, numbers, objects, functions, etc.) |

Example:

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

In the object, the key turned into the string `"[object Object]"`,
while in `Map` it stayed a **real object**.

## 2. Order preservation

| Feature | `Object` | `Map` |
|---|---|---|
| Key order | Partially guaranteed (ES6+) | Always preserved |

`Map` always returns elements **in insertion order**,
while an object can behave differently with numeric keys:

```javascript
const obj = { 2: "b", 1: "a" };
console.log(Object.keys(obj)); // ["1", "2"] (numbers are sorted)
```

```javascript
const map = new Map([[2, "b"], [1, "a"]]);
console.log([...map.keys()]); // [2, 1] (order is preserved)
```

## 3. Easy to get the size

| Feature | `Object` | `Map` |
|---|---|---|
| Size | `Object.keys(obj).length` | `map.size` |

```javascript
const map = new Map([["a", 1], ["b", 2]]);
console.log(map.size); // 2
```

## 4. Performance

| Feature | `Object` | `Map` |
|---|---|---|
| Frequent insertions / deletions | Slower | Faster |
| Iterating over elements | Inconvenient | Convenient via `for...of` |

`Map` is optimized specifically for frequent additions, deletions, and traversal.

## 5. Iterability

| Feature | `Object` | `Map` |
|---|---|---|
| Iterates directly | No | Yes |

```javascript
const map = new Map([["x", 10], ["y", 20]]);
for (const [key, value] of map) {
  console.log(key, value);
}
// x 10
// y 20
```

For an object, you have to call `Object.keys()`, `Object.entries()`, and so on.

## 6. Prototype and inherited properties

| Feature | `Object` | `Map` |
|---|---|---|
| Inherits from `Object.prototype` | Yes | No |
| Can conflict with methods (`toString`, `hasOwnProperty`) | Yes | No |

`Map` has no "clutter" from built-in methods,
so any key can be used safely.

## 7. Converting between them

```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()` and `Object.fromEntries()` let you convert easily in both directions.

## 8. When to use which

| Use | When |
|---|---|
| `Object` | a data structure with fixed properties (for example, a user model) |
| `Map` | dynamic keys, any key types, a cache, frequent add/remove operations |

## Summary:

| Feature | `Object` | `Map` |
|---|---|---|
| Key type | string / symbol | any type |
| Key order | partially ordered | preserved |
| Size | must be counted manually | `.size` |
| Iterability | via `Object.keys()` | directly (`for...of`) |
| Performance | lower | higher |
| Use case | static data | dynamic collections |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.