# Map and Set in JavaScript

## What Map is

### 1\. The Problem with Traditional Objects

We’ve used Objects as key-value stores forever. But Objects were designed to be **records**, not high-frequency lookup tables.

*   **Key Restrictions:** Object keys *must* be Strings or Symbols. If you try to use a DOM node or another object as a key, it gets stringified to `"[object Object]"`.
    
*   **The Prototype Trap:** Objects come with built-in properties like `.toString`. If you aren't careful, a user input could overwrite a hidden property.
    
*   **Size Matters:** Finding the size of an object requires `Object.keys(obj).length`—an $O(n)$ operation.
    

### 2\. Enter the `Map`: A Better Key-Value Store

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/c95fbd30-90ae-46a1-9285-ec8468653e90.png align="center")

A Map is a collection of keyed data items, similar to an Object. However, here's the main difference:

*   **Any Key Type:** You can use a Function, an Object, or even a Boolean as a key.
    
*   **Order is Preserved:** Maps remember the insertion order. Objects... well, it’s complicated.
    
*   **Performance:** Maps are optimized for frequent additions and removals.
    

```const
const user1 = { name: "Prakash" };

// Using an object AS a key!
userMetadata.set(user1, { lastLogin: "2026-03-26" });

console.log(userMetadata.get(user1)); // { lastLogin: "2026-03-26" }
console.log(userMetadata.size); // 1 (Instant lookup)
```

### 3\. The `Set`: The "No-Duplicates" Engine

An Array is a list; a `Set` is a **collection of unique values**.

If you have a list of user IDs and you need to ensure no one is counted twice, an Array requires you to run `.includes()` or `.indexOf()`—which gets slower as the list grows ($O(n)$).

A `Set` handles uniqueness automatically at the engine level.

```const

tags.add("javascript");
tags.add("coding");
tags.add("javascript"); // Duplicate! Ignored automatically.

console.log(tags.size); // 2
```

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>Use Map When...</strong></p></td><td colspan="1" rowspan="1"><p><strong>Use Set When...</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Lookup</strong></p></td><td colspan="1" rowspan="1"><p>You need to map "A" to "B" with complex keys.</p></td><td colspan="1" rowspan="1"><p>You just need to know if "A" exists.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Uniqueness</strong></p></td><td colspan="1" rowspan="1"><p>Keys are unique by default.</p></td><td colspan="1" rowspan="1"><p>Every element must be unique.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Performance</strong></p></td><td colspan="1" rowspan="1"><p>Constant searching/deleting of entries.</p></td><td colspan="1" rowspan="1"><p>Removing duplicates from an Array.</p></td></tr></tbody></table>

> **Pro Tip:** To quickly de-duplicate an array, use the spread operator: `const unique = [...new Set(oldArray)];`. It’s a clean, one-line "patch" for your data.

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/05b3ca92-4f9b-43d8-ae57-42bc5276bc97.png align="center")