JavaScript Map & Set

Learn how to store key-value data with any type of key using Map, and easily remove duplicates using Set.

1. What is a Map?

A Map is a collection of key-value pairs, just like a regular Object. But unlike an Object (which only allows strings and symbols as keys), a Map lets you use any data type as a key — including objects, numbers, and functions!

💡 Think of a Smart Locker System

In a regular object, your locker tag must be a string of text. In a Map, your locker key can be a physical object, a numeric code, or a digital badge!

const userMap = new Map();

// 1. You can use objects as keys!
const userAlex = { id: 101, name: "Alex" };
userMap.set(userAlex, "Admin");

// 2. You can use numbers or strings as keys:
userMap.set(404, "Page Not Found");
userMap.set("theme", "dark");

console.log(userMap.get(userAlex)); // "Admin"
console.log(userMap.get(404));      // "Page Not Found"
console.log(userMap.has("theme"));  // true
console.log(userMap.size);          // 3

Output

Admin
Page Not Found
true
3

2. Map vs Plain Object: When to Use Which?

Here is why Maps are often better than regular Objects for complex data lookups:

Map (High Performance ⚡)

Keys can be anything. Remembers exact insertion order. Direct .size property. Fast frequent additions and deletes.

Plain Object (Simple Records 📄)

Keys are converted to strings. Great for simple static settings, JSON data, and component props.

3. What is a Set? (No Duplicates Allowed!)

A Set is a collection of values where every item must be unique. If you try to add a value that already exists, the Set simply ignores it!

💡 Think of a VIP Guestlist

Even if a guest's name is announced 5 times, their name is only written down once on the guestlist.

const guestList = new Set();

guestList.add("Alex");
guestList.add("Priya");
guestList.add("Alex"); // Ignored! (Duplicate)
guestList.add("Sam");

console.log(guestList.size); // 3
console.log(guestList.has("Priya")); // true (Super fast O(1) lookup!)

Output

3
true

4. Super Power: Remove Array Duplicates in 1 Line

The most common real-world use of Set is cleaning duplicate values from an array:

const rawTags = ["react", "js", "css", "react", "html", "js", "react"];

// Pass the array to Set (removes duplicates), then spread back into an array:
const uniqueTags = [...new Set(rawTags)];

console.log(uniqueTags); // ["react", "js", "css", "html"]

Output

[ 'react', 'js', 'css', 'html' ]

5. Quick Map & Set Summary

Collection	Key Feature	Common Methods	Size Check
Map	Key-Value pairs with any type of key	`.set(k, v)`, `.get(k)`, `.has(k)`, `.delete(k)`	`map.size`
Set	List of unique values (no duplicates)	`.add(v)`, `.has(v)`, `.delete(v)`, `.clear()`	`set.size`

6. Map & Set Interview Deck

Test your knowledge on Set deduplication, Object keys in Map vs Plain Objects, lookup performance, and Map size:

⭐ Easy • Set Deduplication Set Basics

const numbers = new Set([1, 1, 2, 2, 3]);

console.log(numbers.size);

What will be logged to the console?

A) 5

B) 3

C) 1

D) undefined

⚡ Medium • Object Reference as Map Key Map Keys

const map = new Map();
const key = { id: 1 };

map.set(key, "User Data");

console.log(map.has(key), map.has({ id: 1 }));

What will be printed to the console?

A) true false

B) true true

C) false false

D) TypeError

⭐ Easy • Lookup Time Complexity Performance

const set = new Set([10, 20, 30, 40]);
// Checking if 30 exists:
console.log(set.has(30));

What is the average time complexity of set.has()?

A) O(1) - Constant time

B) O(N) - Linear time

C) O(N log N)

D) O(N^2)

⭐ Easy • Array Deduplication Set & Spread

const letters = ["a", "b", "a", "c", "b"];
const unique = [...new Set(letters)];

console.log(unique);

What will be logged to the console?

A) ['a', 'b', 'c']

B) ['a', 'b', 'a', 'c', 'b']

C) { 'a', 'b', 'c' }

D) undefined

⭐ Easy • Map Key Overwrites Map Mutation

const m = new Map();
m.set("name", "Sam");
m.set("role", "Developer");
m.set("role", "Lead");

console.log(m.size);

What is m.size?

A) 2

B) 3

C) 1

D) undefined

7. Practice Challenge

🎯 Coding Challenge: Map Scores & Set Deduplication

1. Create a Map storing student names and numeric scores.
2. Retrieve a score using .get() and print the Map's size.
3. Deduplicate an array of repeated numbers using a Set and convert it back to an Array using spread.

Your output will appear here.