JS Maps

Think of a coat check counter, you hand over your coat and receive a numbered ticket, that ticket, the key, reliably retrieves your exact coat, the value, later, no matter what order coats came in. A Map in JavaScript is that coat check system, a collection of key-value pairs where any type of value can be a key, not just text, and looking up a value by its key is fast and reliable. Maps are a natural fit for structured lookups, like tracking a visitor's progress per tutorial on cookiescursor.com, keyed by the tutorial's own identifier.

In this page:

Creating a Map
set and get
has, delete, and size
Iterating a Map
Map vs Object

Creating a Map

A Map is created with new Map(), optionally initialized from an array of [key, value] pairs, giving you a structured collection ready for lookups by key from the start.

Note: Initializing a Map directly from an array of pairs is often cleaner than creating an empty Map and calling set() repeatedly.

Warning: Unlike a plain object, a Map's keys are not automatically converted to strings, a numeric key 1 stays distinct from the string key 1.

Example: Creating a Map

javascript

const map = new Map([["name", "Sam"], ["age", 30]]);
console.log(map);

set and get

set(key, value) adds or updates an entry in the Map, and get(key) retrieves the value stored under a given key, returning undefined if that key isn't present. Both methods work with any value as a key, including objects and functions, not just strings.

Note: Calling set() with a key that already exists simply updates that entry's value, it does not create a duplicate entry.

Warning: get() on a missing key returns undefined rather than throwing an error, always check with has() first if the key's presence isn't certain.

Example: set and get

javascript

const map = new Map();
map.set("name", "Alex");
console.log(map.get("name"));
console.log(map.get("missing"));

has, delete, and size

has(key) checks whether a Map contains a specific key, delete(key) removes an entry entirely, and the size property reports how many entries the Map currently holds. Checking has() before get() is a common way to distinguish a genuinely missing key from one whose value happens to be undefined.

Note: Checking has() before get() is a clear, explicit way to distinguish between 'key missing' and 'key present but its value is undefined'.

Warning: delete() returns true only if the key actually existed and was removed, calling it on a nonexistent key returns false without error.

Example: has, delete, and size

javascript

const map = new Map([["a", 1]]);
console.log(map.has("a"));
map.delete("a");
console.log(map.size);

Iterating a Map

Maps are iterable, and for...of paired with array destructuring, for (let [key, value] of myMap), is the most common and readable way to visit every key-value pair in insertion order.

Note: Use myMap.keys() or myMap.values() alone when you only need one side of each pair, rather than destructuring both every time.

Warning: Like Sets, Maps preserve insertion order, but that order changes if you delete and re-add a key, it moves to the end.

Example: Iterating a Map

javascript

const map = new Map([["a", 1], ["b", 2]]);
for (let [key, value] of map) {
  console.log(key, value);
}

Map vs Object

A Map allows any type of key, tracks its size directly, and maintains reliable insertion order, while a plain object is often simpler for straightforward string-keyed data and benefits from familiar dot and bracket notation.

Note: Reach for a Map when keys aren't simple strings, when you need frequent additions and deletions, or when you want a built-in size property.

Warning: A plain object has no built-in size property or guaranteed key order across all engines historically, relying on these features specifically favors using a Map.

Example: Map vs Object

javascript

const map = new Map();
map.set(1, "numeric key");
console.log(map.size);
const obj = { name: "Sam" };
console.log(obj.name);

Common Mistakes

Using bracket notation, like myMap[key], instead of the proper get() and set() methods, Maps don't support bracket access.
Forgetting that a Map's size is checked with the size property, similar to a Set, not length like an array.
Confusing Map with a plain object, Maps allow any type of key, including objects and numbers, while plain object keys are always converted to strings.

Chapter Summary

A Map stores key-value pairs where keys can be any type, not just strings.
set(), get(), delete(), and has() are the primary methods for managing a Map's contents.
Maps can be iterated with for...of, and their size property reports how many entries they contain.

Browser Support

Map has been supported in all major browsers since 2015 and is a fully standard part of modern JavaScript.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Set Logic Next Lesson → JS typeof

JS Maps

Creating a Map

set and get

has, delete, and size

Iterating a Map

Map vs Object

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code