# Map and Set in JavaScript

In this article, we’ll learn about two important data structures in JavaScript: **Map** and **Set**.

What we are going to learn:

*   What Map is
    
*   What Set is
    
*   Difference between Map and Object
    
*   Difference between Set and Array
    
*   When to use Map and Set
    

* * *

## What Map is?

A Map is a collection of key-value pairs, just like an object — but more powerful and flexible.

The main difference is:  
In a Map, keys can be of any type (not just strings).

### Example:

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

map.set("name", "Josh");
map.set(1, "number key");
map.set(true, "boolean key");

console.log(map.get("name")); // Josh
console.log(map.get(1)); // number key
```

### Important methods:

```javascript
map.set(key, value)   // add value
map.get(key)          // get value
map.has(key)          // check if key exists
map.delete(key)       // remove key
map.clear()           // remove all
```

* * *

## What Set is?

A Set is a collection of unique values.

It automatically removes duplicates.

### Example:

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

console.log(set); // {1, 2, 3, 4}
```

### Important methods:

```javascript
set.add(value)     // add value
set.has(value)     // check value
set.delete(value)  // remove value
set.clear()        // remove all
```

* * *

## Difference between Map and Object

| Feature | Map | Object |
| --- | --- | --- |
| Key type | Any type (number, object, boolean) | Only string or symbol |
| Order | Maintains insertion order | Not guaranteed (older behaviour) |
| Iteration | Easy with `for...of` | Need extra methods |
| Performance | Better for frequent add/remove | Good for simple use cases |

### Example:

```javascript
const obj = {};
obj[1] = "one";   // converted to string "1"

const map = new Map();
map.set(1, "one"); // stays number
```

So Map keeps the original type of keys.

* * *

## Difference between Set and Array

| Feature | Set | Array |
| --- | --- | --- |
| Duplicates | Not allowed | Allowed |
| Order | Maintains order | Maintains order |
| Access | No index | Index-based |
| Use case | Unique values | Ordered list |

### Example:

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

console.log(arr); // [1, 2, 2, 3]
console.log(set); // {1, 2, 3}
```

* * *

## When to use Map and Set

### Use Map when:

*   You need **key-value pairs**  
    
*   Keys are not just strings (like numbers, objects)  
    
*   You need better performance for frequent updates  
    

Example:

```javascript
const userRoles = new Map();

userRoles.set("user1", "admin");
userRoles.set("user2", "editor");
```

* * *

### Use Set when:

*   You need unique values only  
    
*   You want to remove duplicates  
    
*   You just care about existence (not position)  
    

Example:

```javascript
const numbers = [1, 2, 2, 3, 4];
const uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // {1, 2, 3, 4}
```

* * *

## Final Thoughts

*   **Map** is like an advanced object with more flexibility  
    
*   **Set** is perfect when you only care about unique values  
    

Both are very useful in real-world applications, especially when working with data.

Start using them in small projects, and you’ll quickly understand where they fit best.