Map & Set

Maps, Sets, and phone contacts

JavaScript already has objects and arrays. This lesson adds two more ways to keep a group of values: Map and Set. Each one is a collection, which means a container that holds many values.

• A Map keeps pairs. Each pair has a key, the thing you look up, and a value, the thing you get back. The key can be any value: a string, a number, even an object.
• A Set keeps single values. Each value can be in it only once.

This lesson uses ideas from earlier lessons: objects, object references, comparisons, loops over arrays, and destructuring. You will use Maps and Sets to count words, to remember what you have already seen, and to look things up.

const prices = new Map([["tea", 3], ["coffee", 5]]);
console.log(prices.get("tea"));
console.log(prices.size);

Line 1 makes a Map with two pairs. new Map(...) takes a list of [key, value] pairs. Here the key "tea" goes with 3, and the key "coffee" goes with 5. Each pair in a Map is also called an entry.

Line 2 calls get("tea"), which looks up the key "tea". It prints 3. Line 3 reads size, the number of entries in the Map. It prints 2.

const tags = new Set(["news", "news", "sale"]);
console.log(tags.has("sale"));
console.log(tags.size);

Line 1 makes a Set from an array. The array has "news" twice, but the Set keeps it only once. Line 2 calls has("sale"), which asks "is this value in the Set?" It prints true. Line 3 prints 2, because the Set holds two different values.

So a Map gives you back a value for a key. A Set only answers yes or no: is this value in it?

A plain object is still the best choice for many things. Use one for a record: one thing with fields you know ahead of time. A user profile, a product from a server, and settings you save as JSON are all records.

But an object's keys can only be strings or symbols. (A symbol is a special kind of key that is always unique. You won't need symbols here.) Any other key is turned into a string first:

• obj[1] uses the key "1", which is a string.
• obj[] usually uses the key "[object Object]".

A Map does not change its keys. The number 1, the string "1", an object, and NaN are four different keys.

A Map also has no hidden keys. An object borrows some names, like toString, from its prototype, the parent object it gets shared methods from. A Map holds only the entries you add, so map.has("toString") is false.

1const key = { id: 1 };Run2const obj = {};3obj[1] = "number one";4obj["1"] = "string one";5obj[key] = "object key";6obj[NaN] = "not a number";7 8const map = new Map();9map.set(1, "number one");10map.set("1", "string one");11map.set(key, "object key");12map.set(NaN, "not a number");13 14console.log(Object.keys(obj));15console.log(map.size);

1const key = { id: 1 };2const obj = {};3obj[1] = "number one";4obj["1"] = "string one";5obj[key] = "object key";6obj[NaN] = "not a number";7 8const map = new Map();9map.set(1, "number one");10map.set("1", "string one");11map.set(key, "object key");12map.set(NaN, "not a number");13 14console.log(Object.keys(obj));15console.log(map.size);

The table below compares the two. Read each row as: for this question, here is the object's answer, and here is the Map's answer.

const stock = new Map([["tea", 4]]);
stock.set("coffee", 0);
console.log(stock.has("coffee"));
console.log(stock.get("coffee"));

Line 1 makes a Map with one entry. Line 2 adds the key "coffee" with the value 0. Line 3 calls has("coffee") and prints true, because the key is there. Line 4 calls get("coffee") and prints 0.

Watch out: 0 counts as false in an if. A value like that is called falsy; 0, "", and undefined are falsy. So to ask "is this key here?", use has. Don't check whether get gave back something that counts as true.

A Set answers one question very well: "Have I seen this value before?"

When you make a Set from an array, the repeats disappear. Each value stays where it first appeared. Removing repeats like this is often called deduping. Here is a common way to dedupe an array: [...new Set(array)]. The ... is spread syntax. It takes the values out of the Set and puts them into a new array.

1const list = [1, 2, 2, 3, NaN, NaN];Run2const unique = new Set(list);3unique.add(3).add(4);4console.log(unique.size);5console.log([...unique]);

How does a Set decide that two values are the same? It uses a rule called SameValueZero, which you met in the Comparisons lesson. It is almost the same as ===:

• NaN counts as equal to NaN. With ===, it does not.
• 0 and -0 count as the same value, just like with ===.
• Objects are compared by reference, which means by which object it is, not by what is inside. Two separate {} objects are two different values, even though they print the same.

1const seen = new Set(["red", "red", "blue"]);2console.log(seen.size);       // 23console.log(seen.has("red")); // true4seen.add("green").add("red"); // add returns the Set5console.log(seen.delete("red")); // true6console.log([...seen]);       // ["blue", "green"]

Line 1 makes a Set that holds "red" once and "blue" once. Then, line by line:

• Line 2: size counts the values. It prints 2.
• Line 3: has checks whether a value is in the Set. It prints true.
• Line 4: add puts a value in and gives back the same Set. So you can call add again right after it. Adding "red" again changes nothing.
• Line 5: delete removes a value. It prints true because it found one to remove.
• Line 6: spreading the Set gives ["blue", "green"], in the order the values were added.

const first = { id: 1 };
const second = { id: 1 };
const selected = new Set([first, first, second]);
console.log(selected.size);
console.log(selected.has(first));

Lines 1 and 2 make two separate objects. They have the same field, but each { } makes a new object. Line 3 puts first in twice and second once. The second first is the very same object, so the Set skips it.

Line 4 prints 2. Line 5 prints true, because first is in the Set.

To iterate means to go through the items one by one, for example with a for...of loop. Maps and Sets are iterable: for...of, spread (...), and destructuring all work on them.

A Set gives you its values. A Map gives you its entries, and each entry is a small array: [key, value]. So you can unpack each entry right in the loop: for (const [key, value] of map).

1const scores = new Map([Run2  ["Ada", 3],3  ["Lin", 5],4]);5 6for (const [name, score] of scores) {7  console.log(name + ": " + score);8}9 10scores.forEach((value, key) => {11  console.log(key + " scored " + value);12});13 14const names = new Set(scores.keys());15console.log([...names].join(", "));

You can also turn one kind of collection into another:

• new Map(Object.entries(obj)) turns an object into a Map. Object.entries gives the object's [key, value] pairs.
• Object.fromEntries(map) turns a Map back into an object. This works well when the keys are strings.
• [...set] and [...map.keys()] make arrays. Then you can use array methods like map and filter.

const profile = { name: "Asha", role: "editor" };
const entries = new Map(Object.entries(profile));
console.log(entries.get("role"));
console.log(Object.fromEntries(entries));

Line 1 is a plain object. Line 2 passes its pairs to new Map. Line 3 looks up "role" and prints editor. Line 4 turns the Map back into an object with Object.fromEntries, so it prints the object { name: "Asha", role: "editor" }.

A common job is: "Give me the value for this key. If there is none yet, add one first." This is called an upsert, a mix of the words "update" and "insert".

Two new Map methods do this job: Map.prototype.getOrInsert and Map.prototype.getOrInsertComputed. They were added to JavaScript in 2026, and not every browser has them yet. So after the page loads, it checks whether your browser has them. Checking first like this is called feature detection. If the methods are missing, the lesson uses a small helper function that does the same thing. Node 22 also needs the helper.

1const counts = new Map();2for (const word of words) {3  const box = getOrInsertComputed(counts, word, () => ({ count: 0 }));4  box.count += 1;5}6console.log([...counts]);

Here is what each one does:

• getOrInsert(map, key, value): if key is missing, it stores value. Then it returns map.get(key).
• getOrInsertComputed(map, key, callback): if key is missing, it calls callback(key) and stores what the callback returns. A callback is a function you hand over so it can be called later. Then it returns map.get(key).

If the key is already there, both return the stored value. Nothing is replaced, and the callback is not called.

The real methods are called on the Map itself, like map.getOrInsert(key, value). The helpers below take the Map as their first input instead.

1function getOrInsert(map, key, value) {2  if (!map.has(key)) map.set(key, value);3  return map.get(key);4}5 6function getOrInsertComputed(map, key, callback) {7  if (!map.has(key)) map.set(key, callback(key));8  return map.get(key);9}10 11const cache = new Map();12getOrInsert(cache, "theme", "dark");13getOrInsert(cache, "theme", "light");14getOrInsertComputed(cache, "letters", key => key.length);15console.log([...cache]);16 17// Helper proof: same=10, added=5

Lines 1 to 9 are the two helpers. Lines 12 and 13 use the same key, "theme". Line 12 finds no "theme", so it stores "dark". Line 13 finds "dark" already there, so "light" is not used.

Line 14 finds no "letters" key, so it calls the callback. The callback returns 7, the length of the word "letters". Line 15 prints [["theme", "dark"], ["letters", 7]].

The last line of the code is a note from this page. It ran the helpers on a Map that held score with the value 10. same=10 means the old value was kept. added=5 is the length of the new key, "bonus".

Maps and Sets are everyday tools for getting data ready to show on a page. Some examples:

• A search page keeps a Set of the filter IDs the user has picked.
• A stats panel counts events in a Map.
• A component library keeps measured sizes in a Map, with each page element (an object) as the key. Saving results so you don't have to work them out again is called a cache.
• A form turns a Map into an object before it saves it.

1const counts = new Map();2for (const word of words) {3  const current = counts.get(word) ?? 0;4  counts.set(word, current + 1);5}6console.log([...counts]);

const counts = new Map();
for (const word of ["tea", "tea", "cake"]) {
  counts.set(word, (counts.get(word) ?? 0) + 1);
}
console.log([...counts]);

For each word, line 3 reads the current count. ?? 0 means "use 0 if there is no count yet". Then it saves the count plus one. Line 5 prints [["tea", 2], ["cake", 1]], in the order the words first appeared.

• Word counters: a Map from each word to its count. It keeps the order the words first appeared.
• Removing repeats: make a Set from an array, then spread it back into an array.
• Caches with object keys: a Map keeps every key and value in memory until you delete them. The later WeakMap & WeakSet lesson shows a kind of Map that lets them go.
• Saving as JSON: turn the Map into an array or an object first. The JSON lesson explains why a Map can't be saved directly.

To pick one, ask which question your data answers:

• "What named fields describe this one thing?" Use a plain object.
• "What value goes with this key?" Use a Map.
• "Have I seen this value before?" Use a Set.

Sort the cases below.

Common misconceptions

• "A Map is just a fancier object." Map entries are not properties. Keys that are not strings stay as they are, and Object.keys(map) does not list the entries.
• "A Set compares objects by what is inside them." It checks whether it is the very same object. Two {} objects are two different values.
• "A Set sorts its values." A Set removes repeats, but it keeps the order you added things. It never sorts.
• "JSON.stringify(new Map()) saves the entries." It does not: it gives "{}". Turn the Map into an array first, or use Object.fromEntries when the keys are strings.
• "getOrInsertComputed always runs the callback." It runs the callback only when the key is missing. That is the reason to use it: the work happens only once.

Key takeaways

• Use a Map for key-value pairs that you add and change, especially when the keys are not strings.
• Use a Set to keep each value once and to ask "is it in here?" Spread it into an array when you need one.
• Maps and Sets both keep the order you added things, and both work with for...of.
• getOrInsert returns the stored value, or adds the value when the key is missing. getOrInsertComputed calls its callback only when the key is missing.
• Turn a Map into an object or an array on purpose before you save it as JSON.

One-liner: a Map answers "what value goes with this key?", a Set answers "have I seen this value?", and an object answers "what named fields describe this one thing?"

Up next: Set operations.

Back to the Working with data stage.