What is the difference between a `Map` object and a plain object in JavaScript?

TL;DR

Both Map objects and plain objects in JavaScript can store key-value pairs, but they have several key differences:

Map vs plain JavaScript objects

In JavaScript, Map objects and plain objects (also known as a "POJO" or "plain old JavaScript object") are both used to store key-value pairs, but they have different characteristics, use cases, and behaviors.

Plain JavaScript objects (POJO)

A plain object is a basic JavaScript object created using the {} syntax. It is a collection of key-value pairs, where each key is a string (or a symbol, in modern JavaScript) and each value can be of any type, including strings, numbers, booleans, arrays, objects, and more.

const person = { name: 'John', age: 30, occupation: 'Developer' };
console.log(person);

Map objects

A Map object, introduced in ECMAScript 2015 (ES6), is a more advanced data structure that allows you to store key-value pairs with additional features. A Map is an iterable, which means you can use it with for...of loops, and it provides methods for common operations like get, set, has, and delete.

const person = new Map([
  ['name', 'John'],
  ['age', 30],
  ['occupation', 'Developer'],
]);
console.log(person);

Key differences

Here are the main differences between a Map object and a plain object:

1. Key types: In a plain object, keys are always strings (or symbols). In a Map, keys can be any type of value, including objects, arrays, and even other Maps.
2. Key ordering: Both have specified ordering rules. Map iteration follows insertion order. Object own keys put integer-index keys first in numeric order, then other string keys in insertion order, then symbol keys in insertion order; individual enumeration APIs select different subsets of those keys.
3. Iteration: A Map is iterable, which means you can use for...of loops to iterate over its key-value pairs. A plain object is not iterable by default, but you can use Object.keys() or Object.entries() to iterate over its properties.
4. Performance: Map is designed for dynamic keyed collections and frequent additions and removals. Plain objects can be excellent for fixed-shape records. Performance depends on the engine and workload, so benchmark before choosing solely for speed.
5. Methods: A Map object provides additional methods, such as get, set, has, and delete, which make it easier to work with key-value pairs.
6. Serialization: JSON.stringify() does not serialize a Map's entries; it produces an empty object ({}) because the entries are not own enumerable properties. A plain object, on the other hand, is serialized to a JSON object with the same structure.

When to use which

Use a plain object (POJO) when:

• You need a simple, lightweight object with string keys.
• The keys describe a record with a known shape.
• You need to serialize the object to JSON (e.g. to send over the network).

Use a Map object when:

• You need to store key-value pairs with non-string keys (e.g., objects, arrays).
• You need to preserve the order of key-value pairs.
• You need to iterate over the key-value pairs in a specific order.
• You frequently add or remove arbitrary keys and the measured workload favors Map.

Use plain objects for record-like data and Map for general-purpose keyed collections. Neither is universally faster or more capable; key types, iteration, prototype behavior, and serialization are usually better decision criteria.

Notes

JSON.stringify(new Map([['a', 1]])) produces {} because map entries are not enumerable object properties. Convert with Object.fromEntries(map) when keys are JSON-safe strings, serialize an entry array with [...map], provide a replacer, or use a library with explicit Map support.

Further reading

• Map - JavaScript | MDN
• Object - JavaScript | MDN

Exercises