If you are learning JavaScript, you have probably already met:

• Object

• Array

And you may be thinking:

“Isn't that enough?”

Honestly, for many things, yes.

Objects are great when you want to store data using keys, and arrays are great when you want to store an ordered list of values.

But real applications sometimes give us problems that don't fit perfectly into either one.

That's where two useful JavaScript data structures enter the picture:

Map and Set.

And instead of memorizing their methods, let's understand why they exist in the first place.

---

1. First, let's imagine a real problem

Suppose you are building a website.

Every time a user visits, you want to remember them.

For example:

John
Peter
Mary
John
Mary

Now you have two questions:

1. How many times did each person visit?

2. How can I store each person only once?

These are actually two different problems.

For the first problem, we need something like:

John  →  2 visits
Peter →  1 visit
Mary  →  2 visits

For the second problem, we simply need:

John
Peter
Mary

No duplicates.

JavaScript gives us two tools that fit these problems nicely:

• Map → key + value

• Set → unique values

Let's understand them one at a time.

---

2. Meet Map

Think of a Map like a notebook.

You write something on the left side and store information about it on the right side.

Key        Value

John   →   5
Peter  →   2
Mary   →   7

In JavaScript:

let visits = new Map();

visits.set("John", 5);
visits.set("Peter", 2);
visits.set("Mary", 7);

Now we can ask:

visits.get("John");

Result:

5

So the basic idea is:

set() → store
get() → retrieve

---

3. The four Map methods you should know first

Don't try to memorize everything at once.

Start with these:

set()

Stores a value.

let map = new Map();

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

---

get()

Gets the value.

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

Output:

Ankit

---

has()

Checks whether a key exists.

console.log(map.has("name"));

Output:

true

If the key doesn't exist:

console.log(map.has("age"));

Output:

false

---

delete()

Removes a key-value pair.

map.delete("name");

Now "name" is gone.

These are the core operations of a Map. It also provides clear() to remove everything and size to get the number of stored entries.

---

4. But wait... isn't this what an Object does?

Excellent question.

You can absolutely do this with an object:

let user = {
    name: "Ankit",
    age: 25
};

So why would we need Map?

One important difference is:

A Map can use keys of different types.

For example:

let map = new Map();

map.set("1", "string");
map.set(1, "number");
map.set(true, "boolean");

Here we have three different keys:

"1"   → string
1     → number
true  → boolean

And JavaScript keeps them separate.

console.log(map.get("1"));

gives:

string

while:

console.log(map.get(1));

gives:

number

The source specifically highlights this distinction: unlike an ordinary object, Map does not convert these keys into strings.

---

5. The really interesting part: objects can be Map keys

This is one of the coolest parts of Map.

Suppose we have two users:

let john = { name: "John" };
let peter = { name: "Peter" };

We can actually use these objects as keys:

let visits = new Map();

visits.set(john, 10);
visits.set(peter, 20);

Now:

console.log(visits.get(john));

gives:

10

And:

console.log(visits.get(peter));

gives:

20

This is possible because Map supports keys of any type, including objects.

---

6. Why can't we just do this with an Object?

Let's try.

let john = { name: "John" };
let peter = { name: "Peter" };

let visits = {};

visits[john] = 10;
visits[peter] = 20;

Looks fine?

But there's a problem.

When an object is used as a key in a regular object, JavaScript converts it to a string representation.

So different objects can end up referring to:

"[object Object]"

That means one entry can overwrite another.

That's exactly the kind of situation where Map becomes useful.

---

7. One small rule that will save you from a common mistake

If you create a Map, use its methods:

map.set(key, value);
map.get(key);
map.has(key);
map.delete(key);

Don't treat it like a normal object:

map[key] = value;

Although JavaScript allows that syntax, it is not actually using the Map's key-value mechanism.

Think:

Object → object syntax

Map → Map methods

---

8. What if I want to see everything inside a Map?

You can loop through it.

Suppose:

let prices = new Map([
    ["apple", 100],
    ["banana", 50],
    ["orange", 80]
]);

You can get the keys:

for (let key of prices.keys()) {
    console.log(key);
}

You can get the values:

for (let value of prices.values()) {
    console.log(value);
}

Or you can get both:

for (let [key, value] of prices) {
    console.log(key, value);
}

Map provides keys(), values(), and entries() for iteration.

And one nice detail:

Map remembers insertion order.

So if you insert:

apple
banana
orange

iteration happens in that same order.

---

9. Now let's meet Set

If Map is about:

KEY → VALUE

then Set is much simpler:

VALUE
VALUE
VALUE

Its main job is:

Keep values unique.

For example:

let numbers = new Set();

numbers.add(10);
numbers.add(20);
numbers.add(10);
numbers.add(30);

What do we have?

10
20
30

The second 10 doesn't create another entry.

That's the whole idea behind Set: a value can occur only once.

---

10. The easiest real-life example of Set

Imagine a website showing the people who visited today.

You receive:

let visitors = [
    "John",
    "Peter",
    "John",
    "Mary",
    "Peter",
    "John"
];

If you simply store this array, you have duplicates.

But maybe you only care about:

“Who visited?”

Not:

“How many times did they visit?”

Then:

let uniqueVisitors = new Set(visitors);

Now you have only unique values.

Conceptually:

John
Peter
Mary

No duplicate entries.

---

11. Set methods

The important methods are very similar to what we saw with Map.

Add

set.add("John");

Check

set.has("John");

Remove

set.delete("John");

Remove everything

set.clear();

Count values

set.size;

These are the core Set operations described in the source.

---

12. Map vs Set — don't confuse them

Here's the simplest way to remember them:

	Map	Set
Stores	Key + Value	Values
Duplicate keys/values	Keys identify values	Duplicate values ignored
Example	user → visits	Unique users
Main operation	set(key, value)	add(value)
Retrieve	get(key)	has(value)

Think about it like this:

Map

"Ankit" → 5
"Rahul" → 2
"Priya" → 8

You want to associate information with something.

Set

"Ankit"
"Rahul"
"Priya"

You only care about uniqueness.

---

13. One more useful thing: Object ↔ Map

Sometimes your data starts as an object.

For example:

let user = {
    name: "John",
    age: 30
};

You can convert it into a Map:

let map = new Map(Object.entries(user));

Object.entries() produces key-value pairs such as:

[
    ["name", "John"],
    ["age", 30]
]

And that's exactly the format Map can consume.

Going in the other direction, you can use:

Object.fromEntries(map);

to create a plain object from a Map.

So you can think:

Object
   ↓
Object.entries()
   ↓
Map

and back:

Map
   ↓
Object.fromEntries()
   ↓
Object

---

14. A tiny practical challenge

Let's say you receive this array:

let users = [
    "Ankit",
    "Rahul",
    "Ankit",
    "Priya",
    "Rahul",
    "Priya"
];

Your task is:

Return only the unique users.

Without Set, you might start writing loops and manually checking whether a value already exists.

With Set:

function uniqueUsers(users) {
    return [...new Set(users)];
}

That's it.

Input:

Ankit
Rahul
Ankit
Priya
Rahul
Priya

Output:

Ankit
Rahul
Priya

The source also uses the “filter unique array members” problem specifically to demonstrate using Set for uniqueness.

---

15. So when should you actually use them?

Don't think:

“Map is better than Object.”

or:

“Set is better than Array.”

That's not the right way to think about it.

Instead ask:

Do I need key → value relationships?

Use:

Map

Example:

user → number of visits
product → price
student → marks

Do I only need unique values?

Use:

Set

Example:

unique users
unique tags
unique IDs
unique categories

Do I need an ordered collection where duplicates are allowed?

An:

Array

may be the natural choice.

Do I have structured data with named properties?

An:

Object

may be appropriate.

The goal isn't to replace everything with Map and `Set.

The goal is to choose the data structure that matches the problem.

---

16. The mental model to remember

If you forget everything from this article, remember these two pictures:

Map

        MAP

      KEY ─────→ VALUE

     John ─────→ 10
     Peter ────→ 20
     Mary ─────→ 30

Map = “Give me information associated with this key.”

---

Set

        SET

       VALUES

       John
       Peter
       Mary

Set = “Give me each value only once.”

That's it.

Once this mental model is clear, methods like set(), get(), has(), add(), and delete() become much easier to remember.

---

Final Cheat Sheet

// MAP

let map = new Map();

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

map.get("name");       // "Ankit"

map.has("name");       // true

map.delete("name");

map.size;

// SET

let set = new Set();

set.add("Ankit");
set.add("Ankit");

set.has("Ankit");      // true

set.delete("Ankit");

set.size;

And the most important difference:

Map → key + value
Set → unique values

You don't need to memorize Map and Set as two more JavaScript topics.

Just remember the problem they solve.

When you need to connect a key with some information, think Map.

When you need to prevent duplicates, think Set.

And suddenly, these two data structures stop feeling like another chapter you have to memorize—and start feeling like tools you can actually use.