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

Syntax

javascript

const mapName = new Map();
mapName.set(key, value);
mapName.get(key);
mapName.has(key);

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

// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
const map = new Map();
// Call `map.set("name", "Alex")`
// Call `map.set("name", "Alex")`
map.set("name", "Alex");
// Print `map.get("name")` to the console
// Print `map.get("name")` to the console
console.log(map.get("name"));
// Print `map.get("missing")` to the console
// Print `map.get("missing")` to the console
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

// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
const map = new Map([["a", 1]]);
// Print `map.has("a")` to the console
// Print `map.has("a")` to the console
console.log(map.has("a"));
// Call `map.delete("a")`
// Call `map.delete("a")`
map.delete("a");
// Print `map.size` to the console
// Print `map.size` to the console
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

// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
const map = new Map([["a", 1], ["b", 2]]);
// Classic for-loop: `let [key, value] of map`
// Classic for-loop: `let [key, value] of map`
for (let [key, value] of map) {
  // Print `key, value` to the console
  // Print `key, value` to the console
  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
you need frequent additions and deletions
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

// Declare the constant `map` as a new `Map` instance
// Declare the constant `map` as a new `Map` instance
const map = new Map();
// Call `map.set(1, "numeric key")`
// Call `map.set(1, "numeric key")`
map.set(1, "numeric key");
// Print `map.size` to the console
// Print `map.size` to the console
console.log(map.size);
// Declare the constant `obj`, set to `{ name: "Sam" }`
// Declare the constant `obj`, set to `{ name: "Sam" }`
const obj = { name: "Sam" };
// Print `obj.name` to the console
// Print `obj.name` to the console
console.log(obj.name);

Live Example

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