# 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:

```js
const user = new Map();

user.set("name", "Barun");
user.set("age", 22);
user.set(true, "isLoggedIn");

console.log(user);
```

Output:

```plaintext
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.

```js
const marks = new Set([10, 20, 30, 20, 10]);

console.log(marks);
```

Output:

```plaintext
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.

```js
const obj = {};

obj[1] = "Number";
obj["1"] = "String";

console.log(obj);
```

Output:

```plaintext
{ '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:

```js
Object.keys(obj).length
```

Extra work.

Iteration is also not very clean.

* * *

# How Map Fixes This

```js
const map = new Map();

map.set(1, "Number");
map.set("1", "String");

console.log(map);
```

Output:

```plaintext
Map(2) { 1 => 'Number', '1' => 'String' }
```

Now both keys exist properly.

No conversion. No data loss.

Also:

```js
console.log(map.size); // 2
```

Direct size access.

* * *

# Problems with Arrays

Arrays are good, but they have limitations.

```js
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

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

console.log(numbers);
```

Output:

```plaintext
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:

```js
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

```js
const users = ["Aman", "Raj", "Aman", "Ravi"];

const uniqueUsers = new Set(users);

console.log(uniqueUsers);
```

No duplicate entries.

* * *

## Storing User Data

```js
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

```js
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

```js
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.