# Map and Set in JavaScript

### What `Map` Is

`Map` is a special data structure in JavaScript used for storing key-value pairs. At first glance, it may look similar to objects. Example:

```js
const user = {
  name: "Shubham"
};
```

But `Map` provides more flexibility and better control in certain situations. Example:

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

map.set("name", "Shubham");

console.log(map.get("name"));
```

Output:

```js
Shubham
```

### Understanding the Structure of Map

A `Map` stores data in:

```js
key → value
```

format. Example:

```js
map.set("age", 21);
```

Here:

*   `"age"` is the key
    
*   `21` is the value
    

### Common Map Methods

Some commonly used methods:

```js
set()
get()
has()
delete()
clear()
size
```

### Example of Multiple Values

Example:

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

userMap.set("name", "Shubham");
userMap.set("age", 21);

console.log(userMap);
```

### What `Set` Is

`Set` is another special JavaScript data structure. Its main purpose is:

> Store unique values only.

Example:

```js
const set = new Set();

set.add(1);
set.add(2);
set.add(2);

console.log(set);
```

Output:

```js
Set(2) {1, 2}
```

Notice:

*   duplicate value `2` is ignored
    

Because sets only allow unique values.

### Understanding the Real Purpose of Set

Arrays can contain duplicates. Example:

```js
[1, 1, 2, 2, 3]
```

But sometimes developers only want unique values. That is exactly where `Set` becomes useful.

### Common Set Methods

Common methods:

```js
add()
has()
delete()
clear()
size
```

Example:

```js
const fruits = new Set();

fruits.add("apple");
fruits.add("banana");
fruits.add("apple");

console.log(fruits);
```

Output:

```js
Set(2) {'apple', 'banana'}
```

### Difference Between `Map` and `Object`

Many beginners wonder:

> “If objects already store key-value pairs, why does Map exist?”

Because `Map` solves several limitations of objects.

### 1\. Key Types

#### Objects

Object keys are mostly strings or symbols.

Example:

```js
const obj = {};

obj[1] = "Hello";

console.log(obj);
```

Internally:

*   `1` becomes `"1"`
    

#### Map

Maps allow any data type as keys.

Example:

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

map.set(1, "Number Key");
map.set(true, "Boolean Key");

console.log(map);
```

Even objects and functions can become keys.

### 2\. Better Iteration

Maps are easier to iterate.

Example:

```js
for (const [key, value] of map) {
  console.log(key, value);
}
```

Objects require extra methods like:

*   `Object.keys()`
    
*   `Object.entries()`
    

### 3\. Size Property

Objects do not directly provide size. Example:

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

But maps provide:

```js
map.size
```

Much cleaner.

### 4\. Performance

For frequent:

*   insertions
    
*   deletions
    
*   dynamic key management
    

Maps often perform better than objects.

### Difference Between `Set` and `Array`

Both store collections of values. But behavior differs significantly.

### Arrays Allow Duplicates

Example:

```js
const arr = [1, 1, 2, 2];
```

Duplicates remain.

### Sets Remove Duplicates

Example:

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

console.log(set);
```

Output:

```js
Set(2) {1, 2}
```

### Arrays Maintain Indexed Structure

Arrays use indexes. Example:

```js
arr[0]
arr[1]
```

Sets do not use indexes directly.

### Arrays Have More Built-in Methods

Arrays support methods like:

*   map()
    
*   filter()
    
*   reduce()
    

Sets are mainly focused on uniqueness.

### Converting Set to Array

Example:

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

const arr = [...set];

console.log(arr);
```

Output:

```js
[1, 2, 3]
```

### Removing Duplicates Using Set

Very common interview trick. Example:

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

const unique = [...new Set(numbers)];

console.log(unique);
```

Output:

```js
[1, 2, 3]
```

### When to Use `Map`

Use `Map` when:

*   dynamic keys are needed
    
*   keys are not just strings
    
*   frequent insert/delete operations happen
    
*   iteration is important
    

### Real Use Cases of Map

Examples:

*   caching systems
    
*   storing metadata
    
*   tracking user sessions
    
*   object-based keys
    
*   fast lookups
    

### Example with Object Keys

Example:

```js
const user = {
  id: 1
};

const map = new Map();

map.set(user, "User Data");

console.log(map.get(user));
```

Objects cannot handle this cleanly.

Maps can.

### When to Use `Set`

Use `Set` when:

*   unique values are required
    
*   duplicates should be removed
    
*   fast existence checking is needed
    

### Real Use Cases of Set

Examples:

*   removing duplicates
    
*   tracking unique visitors
    
*   storing selected IDs
    
*   preventing repeated values
    

### Fast Lookup with Set

Example:

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

console.log(ids.has(2));
```

Output:

```js
true
```

### Common Beginner Mistake

Many beginners treat `Map` exactly like objects.But maps are different because:

*   keys can be any type
    
*   order is preserved
    
*   iteration is cleaner
    

### Another Common Mistake

Beginners sometimes expect:

```js
set[0]
```

to work. But sets are not index-based collections like arrays.

### Why Modern JavaScript Introduced These Structures

As applications became larger, developers needed better data structures for:

*   performance
    
*   flexibility
    
*   cleaner APIs
    

`Map` and `Set` solve many problems traditional objects and arrays struggle with.

### Final Understanding

`Map` is a key-value data structure with flexible key support and better iteration features.  
`Set` is a collection that stores only unique values.  
Compared to:

*   objects → maps provide more flexibility
    
*   arrays → sets provide uniqueness
    

Understanding when to use:

*   objects
    
*   arrays
    
*   maps
    
*   sets
    

is an important part of writing efficient and scalable modern JavaScript applications.