Map and Set in JavaScript

At first, I used to store everything in:

// Objects
const user = { name: "Nausheen" };

// Arrays
const numbers = [1, 2, 3];

And honestly… it worked. But then I started hitting small problems.

Nothing big… just annoying things like:

• Keys behaving weirdly in objects

• Duplicate values in arrays

• Extra logic just to check uniqueness

And that’s when I discovered Map and Set

---

The Problem with Objects (Why Map Exists)

Objects are great. But they have limitations.

const obj = {};
obj[1] = "one";
obj["1"] = "string one";

console.log(obj);

Output?

{ "1": "string one" }

Wait… what? Both keys became "1" Because objects convert keys into strings

---

Another issue

Objects don’t maintain strict insertion behavior in some cases, and they’re not designed purely for key-value storage.

That’s where Map comes in.

---

What is a Map?

Think of Map like: “An upgraded object for key-value storage”

Example:

const map = new Map();

map.set(1, "one");
map.set("1", "string one");

console.log(map);

Now both keys exist separately

---

Why?

Because Map allows:

• any type of key (number, string, object, even function)

• no automatic conversion

---

Real Understanding of Map

Map:
Key → Value
(any type → any value)

---

Accessing values

map.get(1);      // "one"
map.get("1");    // "string one"

---

Checking values

map.has(1); // true

---

Deleting

map.delete(1);

---

Why Map Matters

Because now:

• keys stay exactly what they are

• no weird conversions

• cleaner and predictable behavior

---

The Problem with Arrays (Why Set Exists)

Arrays are simple.

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

Duplicates everywhere. If you want unique values? You write logic.
Loops. Conditions. Extra code.

That’s annoying.

---

What is a Set?

Think of Set like: “A collection that automatically removes duplicates”

---

Example:

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

console.log(set);

Output:

{1, 2, 3}

Duplicates? Gone.

---

Real Understanding of Set

Set:
Only unique values allowed

---

Add values

set.add(4);

---

Check value

set.has(2); // true

---

Delete

set.delete(3);

---

Before vs After (This is where it clicks)

Old way (remove duplicates):

const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];

Done in one line

---

Map vs Object (Clear Difference)

Feature	Object	Map
Key types	Strings only	Any type
Order	Not strict	Maintained
Performance	Basic	Optimized

---

Simple thought:

Object = general purpose
Map = pure key-value tool

---

Set vs Array

Feature	Array	Set
Duplicates	Allowed	Not allowed
Access	Index-based	No index
Purpose	Ordered list	Unique values

---

Simple thought:

Array = list
Set = unique collection

---

Real-World Use Cases

Let’s talk practical.

1. Removing duplicates

const unique = [...new Set([1, 2, 2, 3])];

2. Tracking unique users

const users = new Set();

users.add("Nausheen");
users.add("Nausheen"); // ignored

3. Storing key-value data properly

const data = new Map();

data.set("id", 101);
data.set("name", "Nausheen");

4. Using objects as keys (Map only)

const objKey = { id: 1 };
const map = new Map();

map.set(objKey, "value");

Not possible in normal objects

---

Mental Model (This Makes Everything Clear)

Map → advanced object (key-value)

Set → advanced array (unique values)

---

Visual Understanding

Map:
[ key1 → value1 ]
[ key2 → value2 ]


Set:
[ value1, value2, value3 ]
(no duplicates)

---

Small but Powerful Insight

Most beginners ignore Map and Set. But in real projects…

they make your code cleaner
reduce unnecessary logic
solve problems faster

---

Assignment Practice

Try this:

1. Create a Map → add 3 key-value pairs
2. Use different key types (number + string)
3. Create a Set → add duplicate values
4. Convert array → unique array using Set
5. Check values using .has()

Run it. Experiment. That’s how it sticks.

---

Final Understanding

You don’t need Map and Set for everything.
But when the situation demands:

unique values → use Set
better key-value handling → use Map

And once you start using them… you’ll stop forcing everything into arrays and objects. Because JavaScript already gave you better tools.