Skip to main content

Command Palette

Search for a command to run...

Map vs Set in JavaScript (The Real Understanding You Actually Need)

Published
4 min read
Map vs Set in JavaScript (The Real Understanding You Actually Need)

So… today we are going to talk about something which most people read once, forget twice, and struggle with in interviews.

Map and Set.

And then comes the classic questions:

  • Difference between Map and Object

  • Difference between Set and Array

And suddenly everything feels confusing.

Let’s fix that properly.


What is Map?

Well technically… definitions will confuse you. So let’s keep it simple.

👉 Map is a collection of key-value pairs, just like objects, but more powerful and predictable.

Let’s see:

const user = new Map();

user.set("name", "Barun");
user.set("age", 22);
user.set(true, "isLoggedIn");

console.log(user);

Output:

Map(3) {
  'name' => 'Barun',
  'age' => 22,
  true => 'isLoggedIn'
}

Now notice something important.

Keys are not limited to strings.

You can use:

  • string

  • number

  • boolean

  • even objects

This is where Map starts becoming useful.


What is Set?

Now this one is even simpler.

👉 Set is a collection of unique values.

Meaning duplicates are automatically removed.

const marks = new Set([10, 20, 30, 20, 10]);

console.log(marks);

Output:

Set(3) { 10, 20, 30 }

If the same value comes twice, Set simply ignores it.


Problems with Traditional Objects

Let’s take a simple example.

const obj = {};

obj[1] = "Number";
obj["1"] = "String";

console.log(obj);

Output:

{ '1': 'String' }

Now think carefully.

We added two different keys:

  • 1 (number)

  • "1" (string)

But JavaScript converted both into string internally.

So the first value got overwritten.

That means:

👉 Objects can silently lose data 👉 Keys are always treated as strings (mostly)


Another issue

Checking size:

Object.keys(obj).length

Extra work.

Iteration is also not very clean.


How Map Fixes This

const map = new Map();

map.set(1, "Number");
map.set("1", "String");

console.log(map);

Output:

Map(2) { 1 => 'Number', '1' => 'String' }

Now both keys exist properly.

No conversion. No data loss.

Also:

console.log(map.size); // 2

Direct size access.


Problems with Arrays

Arrays are good, but they have limitations.

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

Problems:

  • Duplicate values

  • No built-in uniqueness

  • You have to write extra logic to clean data


How Set Solves This

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

console.log(numbers);

Output:

Set(3) { 1, 2, 3 }

Set automatically removes duplicates.

No loops. No filters. No extra work.


Difference Between Map and Object

Feature Object Map
Key Types String/Symbol Any type
Order Not reliable Maintained
Size Manual .size
Iteration Indirect Direct

Example:

const map = new Map();
map.set("name", "Barun");

console.log(map.get("name")); // Barun
console.log(map.size); // 1

Difference Between Set and Array

Feature Array Set
Duplicates Allowed Not allowed
Order Maintained Maintained
Use Case General list Unique collection

Real World Examples

Removing Duplicate Users

const users = ["Aman", "Raj", "Aman", "Ravi"];

const uniqueUsers = new Set(users);

console.log(uniqueUsers);

No duplicate entries.


Storing User Data

const users = new Map();

users.set(101, { name: "Aman" });
users.set(102, { name: "Raj" });

console.log(users.get(101));

Perfect for key-value storage.


When to Use Map

Use Map when:

  • You need key-value storage

  • Keys are not just strings

  • Order matters

  • Frequent updates are required


When to Use Set

Use Set when:

  • You need only unique values

  • You want to remove duplicates

  • You want faster lookups

  • Clean data is important


Final Understanding

  • Object → Simple key-value storage

  • Map → Advanced key-value storage

  • Array → Ordered list

  • Set → Unique list


Homework

Q1

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

Convert this into unique values using Set.


Q2

Store student data using Map:

  • id → name

Q3

const obj = {};
obj[true] = "yes";
obj["true"] = "no";

console.log(obj);

Why does data get overwritten? Fix this using Map.


This is one of those topics that looks small but becomes very important in real-world applications. Understanding this properly will save you from many subtle bugs later.