# Map and Set in JavaScript

While working in Javascript, you have mostly worked with objects and arrays. But there are some limitations when used for large data or applying complex operations.

## Problems in Objects

*   Object must have a key as a string. If you use a number, it will automatically be used as a string.
    
*   Objects inherit properties from their prototypes. For example: Object.*keys* is a predefined property that should not be used as a key. This may lead to unexpected bugs.
    
*   You cannot directly iterate over the object's values/keys. You have to use object.keys() or object.entries() to do iteration.
    
*   Order of insertion is not maintained.
    

## Problems with Arrays

*   Removing a specific value from an array requires another iteration to find the position of the value in the array.
    
*   The array might have duplicate values. In some cases the developer doesn't want to insert duplicate values into the array. To achieve the same, they need to iterate over the whole array to check if the value already exists.
    

## Understanding Map and Set

### What is Map?

Map is a built-in datatype in Javascript. It is used to store key-value pairs. It is like an object with some extra powers.

1.  Key can be of any type (string, number, array...)
    
2.  Key should be unique
    
3.  Maintain insertion order. This means if you iterate over a map, it will be the same order in which they are inserted.
    

**Map Methods:**

1.  Insert value,  
    To insert a value in map, use `map.set(key, value)`.  
    Examples:
    
    ```javascript
    const employee = new Map();
    
    employee.set("id", 101);
    employee.set("name", "Rahul");
    ```
    
2.  Get a value  
    To get a value, use `map.get(key)`
    
    ```javascript
    const employee = new Map();
    
    employee.set("id", 101);
    employee.set("name", "Rahul");
    
    const employeeName = employee('name');
    
    console.log(employeeName); // Rahul
    ```
    
3.  Check if value exisits, use `map.has(key)`, return boolean state.
    
    ```javascript
    const employee = new Map();
    
    employee.set("id", 101);
    employee.set("name", "Rahul");
    
    console.log(employee.has('name'));   // true
    console.log(employee.has('salary')); // false
    ```
    
4.  Delete a value, use `map.delete(key)`
    
    ```javascript
    const employee = new Map();
    
    employee.set("id", 101);
    employee.set("name", "Rahul");
    
    employee.delete("id");
    
    console.log(employee.has("id")); // false
    ```
    

## What is Set?

A set is also a built-in datatype in Javascript used to store unique values. It is more like an array, but with the power of uniqueness.

*   Store unique values
    
*   Store only values, not keys
    
*   Maintain insertion order
    

**Set methods:**

1.  Insert a value, use `set.add(value)`.
    
    ```javascript
    const set = new Set();
    
    set.add(42);
    set.add(42);
    set.add(13);
    
    for (const item of set) {
      console.log(item);
      // Expected output: 42
      // Expected output: 13
    }
    ```
    
2.  Check if the value exists, use `set.has(key)`, return a boolean state.
    
    ```javascript
    const set = new Set();
    
    set.add(42);
    set.add(13);
    
    console.log(set.has(42));   // true
    console.log(set.has(40)); // false
    ```
    
3.  Delete a value, use `set.delete(value)`, returns a boolean value indicating if the value is deleted successfully.
    
    ```javascript
    const set = new Set();
    
    set.add(42);
    set.add(13);
    
    console.log(set.delete(42)); // true
    console.log(set.delete(40)); // false
    
    console.log(set) // Set(1) {13}
    ```
    

Both Map and Set have other methods like `values`, `entries`, `size` and `forEach` for iteration. Here I have explained to you the necessary methods for insertion and deletion of values.

## Comparison between Map and Object

| Feature | Map | Object |
| --- | --- | --- |
| Key Types | Any Type | String only |
| Order of values | Maintained | Not guaranteed |
| Performance | Optimized for insertion and removal | No optimization |
| Iteration | Has in-built methods | Need other methods |

## Comparison between Set and Array

| Features | Set | Array |
| --- | --- | --- |
| Unique Values | Yes | No |
| Maintained Order | Yes | Yes |
| Search | Faster with `has` method | Slower with `includes` method |

## When to Use Map?

Use Map when:

*   You need key-value storage
    
*   Keys are not just strings
    
*   Frequent add/remove operations
    
*   You care about insertion order
    

Example:

*   Caching data
    
*   Storing user sessions
    
*   Mapping objects to values
    

## When to Use Set?

Use Set when:

*   You need **unique values**
    
*   You want to **remove duplicates**
    
*   Fast lookup is required
    

Example:

*   Unique tags
    
*   Removing duplicate IDs
    
*   Tracking visited items
    

## Conclusion

*   Use Map when you need a better version of objects
    
*   Use Set when you need uniqueness without extra logic
    
*   Avoid forcing everything into Objects & Arrays
    

Follow Javascript series for more updates 🙂