Map and Set in JavaScript
As JavaScript evolved, developers needed better data structures than traditional objects and arrays for certain use cases.
That’s where Map and Set come in.
They provide more control, better performance in some cases, and cleaner semantics.
🔹 What is a Map?
👉 A Map is a collection of key-value pairs, similar to objects—but with important differences.
📌 Example
const map = new Map();
map.set("name", "Sayantan");
map.set("age", 21);
console.log(map.get("name")); // Sayantan
🔹 Key Features of Map
Keys can be any data type (not just strings)
Maintains insertion order
Has built-in methods like:
.set().get().has().delete()
🔹 Example with Non-String Keys
const map = new Map();
map.set(1, "Number key");
map.set(true, "Boolean key");
console.log(map.get(1)); // Number key
👉 This is NOT possible with normal objects.
🔹 What is a Set?
👉 A Set is a collection of unique values.
It automatically removes duplicates.
📌 Example
const set = new Set([1, 2, 2, 3, 4]);
console.log(set); // {1, 2, 3, 4}
🔹 Key Features of Set
Stores only unique values
No duplicate entries
Maintains insertion order
Useful methods:
.add().has().delete()
🔹 Example: Removing Duplicates
const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];
console.log(unique); // [1, 2, 3]
🔥 Map vs Object
| Feature | Map | Object |
|---|---|---|
| Key Types | Any type | Strings/Symbols only |
| Order | Maintains order | Not guaranteed (historically) |
| Iteration | Easy (for...of) |
Requires extra methods |
| Performance | Better for frequent updates | Good for simple use cases |
📌 Problem with Objects
const obj = {};
obj[1] = "Number key";
console.log(obj["1"]); // "Number key"
👉 Keys are converted to strings → loss of flexibility
🔥 Set vs Array
| Feature | Set | Array |
|---|---|---|
| Duplicates | Not allowed | Allowed |
| Order | Maintained | Maintained |
| Access | No index | Index-based |
| Use Case | Unique values | Ordered data |
📌 Problem with Arrays
const arr = [1, 2, 2, 3];
const unique = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(unique); // [1, 2, 3]
❌ Complex ❌ Inefficient
✔ Set solves this easily
🔹 When to Use Map
Use Map when:
You need key-value storage
Keys are not strings
Frequent additions/deletions
Need guaranteed insertion order
📌 Real Example
const userRoles = new Map();
userRoles.set("Sayantan", "Admin");
userRoles.set("Rahul", "User");
console.log(userRoles.get("Sayantan"));
🔹 When to Use Set
Use Set when:
You need unique values
Removing duplicates
Checking existence quickly
📌 Real Example
const visitedPages = new Set();
visitedPages.add("/home");
visitedPages.add("/about");
visitedPages.add("/home");
console.log(visitedPages); // no duplicates
🧠 Mental Model
Map → advanced object (key-value storage)
Set → advanced array (unique values)
🚀 Practical Use Cases
1. Remove Duplicates
const nums = [1, 2, 2, 3];
const uniqueNums = [...new Set(nums)];
2. Fast Lookup
const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
3. Dynamic Key Storage
const map = new Map();
const objKey = { id: 1 };
map.set(objKey, "Data");
console.log(map.get(objKey)); // Data
⚠️ Common Mistakes
❌ Using Object Instead of Map
const obj = {};
obj[{ id: 1 }] = "value";
console.log(obj); // "[object Object]"
👉 Key gets stringified → incorrect behavior
❌ Expecting Index in Set
const set = new Set([10, 20, 30]);
console.log(set[0]); // undefined ❌
👉 Sets don’t support indexing