What is Map?

JavaScriptJunior~2 min read

What Map is

Map is a built-in JavaScript object that stores "key → value" pairs and remembers the insertion order of those pairs.

It resembles a plain {} object, but with extended capabilities:

it can use any data type as a key (including objects, functions, NaN);
it has convenient methods for adding, removing and iterating;
it preserves the insertion order of elements.

Usage example

javascript

const map = new Map();

map.set('name', 'Alex');
map.set('age', 25);

console.log(map.get('name')); // Alex
console.log(map.get('age'));  // 25
console.log(map.size);        // 2

Main methods and properties of Map

Method / property	What it does	Example
`set(key, value)`	Adds an element	`map.set('a', 1)`
`get(key)`	Returns the value for a key	`map.get('a')`
`has(key)`	Checks if a key exists	`map.has('a') // true`
`delete(key)`	Removes an element	`map.delete('a')`
`clear()`	Clears the whole collection	`map.clear()`
`size`	The number of elements	`map.size // 2`

Example: different types of keys

javascript

const map = new Map();

const objKey = { id: 1 };
const funcKey = () => {};
const numKey = 42;

map.set(objKey, 'object');
map.set(funcKey, 'function');
map.set(numKey, 'number');

console.log(map.get(objKey)); // object
console.log(map.get(funcKey)); // function
console.log(map.get(42)); // number

Unlike a plain {} object, keys here are compared by reference, not by a string-coerced form.

Example with NaN and objects

javascript

const map = new Map();
map.set(NaN, 'Not a Number');
console.log(map.get(NaN)); // 'Not a Number'

Even NaN works as a key (impossible in a plain object).

Iterating a Map

Map is an iterable collection, so it can be traversed in several ways:

1. for...of

javascript

const map = new Map([
  ['name', 'Alex'],
  ['age', 25],
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// name: Alex
// age: 25

2. Iteration methods:

javascript

map.forEach((value, key) => {
  console.log(key, value);
});

3. Getting keys / values / entries:

javascript

console.log([...map.keys()]);   // ['name', 'age']
console.log([...map.values()]); // ['Alex', 25]
console.log([...map.entries()]); // [['name','Alex'], ['age',25]]

Comparison with the {} object

Feature	`Object`	`Map`
Key type	Only a string or a symbol	Any type (including objects and functions)
Element order	Not guaranteed (before ES2015)	Guaranteed
Number of elements	Must be counted manually (`Object.keys().length`)	`map.size`
Deletion	`delete obj.key` (slow)	`map.delete(key)` (fast)
Iteration	`for...in` (with inherited properties)	Clean `for...of`
Performance	Better for small data sets	Better for frequent insertions/deletions

Converting between Map and an object

From an object → to a Map:

javascript

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

From a Map → to an object:

javascript

const obj2 = Object.fromEntries(map);

A practical usage example

Counting occurrences of elements:

javascript

const arr = ['a', 'b', 'a', 'c', 'b', 'a'];

const counter = new Map();

for (const item of arr) {
  counter.set(item, (counter.get(item) || 0) + 1);
}

console.log(counter); // Map(3) { 'a' => 3, 'b' => 2, 'c' => 1 }

When to use Map

Use Map when:

you need to store keys that are not just strings;
it matters that insertion order is preserved;
you need frequent insertion and deletion of elements;
you are working with associative data structures.

Quick summary

What	Description
Type	A "key-value" collection
Keys	Any type (including objects)
Order	Preserved
Methods	`.set()`, `.get()`, `.has()`, `.delete()`, `.clear()`
Size	`map.size`
Iteration	`for...of`, `.forEach()`, `.keys()`, `.values()`, `.entries()`

Put simply:

Map is an improved version of the {} object with proper methods, support for any key type, and a guaranteed element order.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.