# Map and Set in JavaScript

In the early days of JavaScript, we relied almost exclusively on **Objects** for key-value storage and **Array** for lists. While they got the job done, they came with "quirks"—like objects only supporting string keys or arrays allowing duplicate values when you didn't want them.

ES6 introduced `Map` and `Set` to solve these specific points. Here is a breakdown of how they work and when to switch from the "traditional" ways.

### 1\. What is a Map?

A **Map** is a collection of keyed data items, similar to an Object. However, the primary difference is that a Map allows keys of **any type**—including functions, objects and primitives.

**Map vs. Object: The Key Differences**

While objects are often used as maps, they have significant limitations:

| Feature | **Object** | **Map** |
| --- | --- | --- |
| **Key Types** | Strings and Symbols only. | Any type (Objects, Functions, etc.). |
| **Order** | Not reliably ordered (historically). | Preserves insertion order. |
| **Size** | Must be tracked manually. | Has a `.size` property. |
| **Performance** | Better for small, static data. | Optimized for frequent additions/removals. |

**The Problem with Objects:** If you try to use an object as key in another object, it stringifies it to `"[object Object]"` , effectively breaking the link. A `Map` keeps the reference intact.

![](https://cdn.hashnode.com/uploads/covers/696b80e04991f69145557dc6/0c1b08b3-4fef-4fd0-8263-a55501d0ad99.png align="center")

### 1\. What is a Set?

A **Set** is a collection of **values where each value must be unique**. Unlike an array, a Set does not use indexes; it's a "set" in the mathematical sense.

### Set vs. Array: The Power of Uniqueness

Arrays are great for ordered lists, but they struggle with uniqueness. If you want to ensure an array has no duplicates, you usually have to write a filter function or loop through it.

**The Uniqueness Property:** A `Set` automatically handles duplicates for you. If you try to add a value that already exists, the Set simply ignores it.

```javascript
const mySet = new Set();
mySet.add(1);
mySet.add(1); // Ignored
console.log(mySet.size); // 1
```

**The Problem with Arrays:** Checking if an item exists in a large array using `.indexOf()` or `.includes()` is an O(n) (it has to check every element). In a `Set`, this check is O(1), making it significantly faster for large datasets.

![](https://cdn.hashnode.com/uploads/covers/696b80e04991f69145557dc6/8f43228e-9e0a-400f-a0e2-356876642ea6.png align="center")

### 3\. When to Use Map and Set

**Use a Map when:**

*   **You need non-string keys:** If you want to associate data with a DOM element or a function.
    
*   **Order matters:** When you need to iterate through elements in the exact order they were added.
    
*   **Frequent updates:** Maps are generally more performant for constant adding and deleting of entries.
    

**Use a Set when:**

*   **You need to stay unique:** For example, storing a list of unique User IDs or tags.
    
*   **High-performance searching:** When you need to constantly check "Is this item in the collection?" using `.has()`.
    
*   **Quick Array de-duplication:** You can turn an array into a set and back again to instantly remove duplicates: `[...new Set(myArray)]`
    

### Summary Table

| **Collection** | **Use Case** | **Best Feature** |
| --- | --- | --- |
| **Object** | Simple data structures / JSON. | Familiarity and JSON support. |
| **Array** | Ordered lists where duplicates are okay. | Indexed access and rich methods (`map`, `filter`). |
| **Map** | Advanced key-value storage. | Flexibility of key types. |
| **Set** | Collections of unique items. | Automatic de-duplication and speed. |