# 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

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

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

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

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

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

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

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

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

```js
const nums = [1, 2, 2, 3];

const uniqueNums = [...new Set(nums)];
```

* * *

### 2\. Fast Lookup

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

console.log(set.has(2)); // true
```

* * *

### 3\. Dynamic Key Storage

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

```js
const obj = {};

obj[{ id: 1 }] = "value";

console.log(obj); // "[object Object]"
```

👉 Key gets stringified → incorrect behavior

* * *

### ❌ Expecting Index in Set

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

console.log(set[0]); // undefined ❌
```

👉 Sets don’t support indexing