Map vs Set in JavaScript (The Real Understanding You Actually Need)

So… today we are going to talk about something which most people read once, forget twice, and struggle with in interviews.
Map and Set.
And then comes the classic questions:
Difference between Map and Object
Difference between Set and Array
And suddenly everything feels confusing.
Let’s fix that properly.
What is Map?
Well technically… definitions will confuse you. So let’s keep it simple.
👉 Map is a collection of key-value pairs, just like objects, but more powerful and predictable.
Let’s see:
const user = new Map();
user.set("name", "Barun");
user.set("age", 22);
user.set(true, "isLoggedIn");
console.log(user);
Output:
Map(3) {
'name' => 'Barun',
'age' => 22,
true => 'isLoggedIn'
}
Now notice something important.
Keys are not limited to strings.
You can use:
string
number
boolean
even objects
This is where Map starts becoming useful.
What is Set?
Now this one is even simpler.
👉 Set is a collection of unique values.
Meaning duplicates are automatically removed.
const marks = new Set([10, 20, 30, 20, 10]);
console.log(marks);
Output:
Set(3) { 10, 20, 30 }
If the same value comes twice, Set simply ignores it.
Problems with Traditional Objects
Let’s take a simple example.
const obj = {};
obj[1] = "Number";
obj["1"] = "String";
console.log(obj);
Output:
{ '1': 'String' }
Now think carefully.
We added two different keys:
1 (number)
"1" (string)
But JavaScript converted both into string internally.
So the first value got overwritten.
That means:
👉 Objects can silently lose data 👉 Keys are always treated as strings (mostly)
Another issue
Checking size:
Object.keys(obj).length
Extra work.
Iteration is also not very clean.
How Map Fixes This
const map = new Map();
map.set(1, "Number");
map.set("1", "String");
console.log(map);
Output:
Map(2) { 1 => 'Number', '1' => 'String' }
Now both keys exist properly.
No conversion. No data loss.
Also:
console.log(map.size); // 2
Direct size access.
Problems with Arrays
Arrays are good, but they have limitations.
const numbers = [1, 2, 3, 2, 1];
Problems:
Duplicate values
No built-in uniqueness
You have to write extra logic to clean data
How Set Solves This
const numbers = new Set([1, 2, 3, 2, 1]);
console.log(numbers);
Output:
Set(3) { 1, 2, 3 }
Set automatically removes duplicates.
No loops. No filters. No extra work.
Difference Between Map and Object
| Feature | Object | Map |
|---|---|---|
| Key Types | String/Symbol | Any type |
| Order | Not reliable | Maintained |
| Size | Manual | .size |
| Iteration | Indirect | Direct |
Example:
const map = new Map();
map.set("name", "Barun");
console.log(map.get("name")); // Barun
console.log(map.size); // 1
Difference Between Set and Array
| Feature | Array | Set |
|---|---|---|
| Duplicates | Allowed | Not allowed |
| Order | Maintained | Maintained |
| Use Case | General list | Unique collection |
Real World Examples
Removing Duplicate Users
const users = ["Aman", "Raj", "Aman", "Ravi"];
const uniqueUsers = new Set(users);
console.log(uniqueUsers);
No duplicate entries.
Storing User Data
const users = new Map();
users.set(101, { name: "Aman" });
users.set(102, { name: "Raj" });
console.log(users.get(101));
Perfect for key-value storage.
When to Use Map
Use Map when:
You need key-value storage
Keys are not just strings
Order matters
Frequent updates are required
When to Use Set
Use Set when:
You need only unique values
You want to remove duplicates
You want faster lookups
Clean data is important
Final Understanding
Object → Simple key-value storage
Map → Advanced key-value storage
Array → Ordered list
Set → Unique list
Homework
Q1
const numbers = [1, 2, 2, 3, 4, 4, 5];
Convert this into unique values using Set.
Q2
Store student data using Map:
- id → name
Q3
const obj = {};
obj[true] = "yes";
obj["true"] = "no";
console.log(obj);
Why does data get overwritten? Fix this using Map.
This is one of those topics that looks small but becomes very important in real-world applications. Understanding this properly will save you from many subtle bugs later.





