Imagine you are building a student management system.

You want to store student information using IDs as keys. You also need to maintain a list of unique subjects chosen by students.

At first, you might use JavaScript Objects and Arrays. But as your application grows, you may face problems like:

• Object keys are limited in flexibility.

• Arrays can contain duplicate values.

• Searching and managing data becomes less efficient.

To solve these problems, JavaScript provides Map and Set.

In this article, we'll learn what Map and Set are, how they differ from Objects and Arrays, and when to use them.

What is a Map in JavaScript?

A Map is a collection of key-value pairs where each key is unique.

Think of it as a more powerful version of an Object.

Creating a Map

const students = new Map();

students.set(1, "Ashish");
students.set(2, "Rahul");
students.set(3, "Priya");

console.log(students);

Output

Map(3) {
  1 => "Ashish",
  2 => "Rahul",
  3 => "Priya"
}

Accessing Values

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

Output

"Ashish"

Checking if a Key Exists

console.log(students.has(2));

Output

true

Deleting a Key

students.delete(3);

console.log(students);

Getting Map Size

console.log(students.size);

Output

2

Why Not Just Use Objects?

Let's look at an Object.

const user = {
  name: "Ashish",
  age: 25
};

Objects work great, but they have some limitations.

For example:

const obj = {};
const key = { id: 1 };

obj[key] = "Student";

console.log(obj);

Output

{
  "[object Object]": "Student"
}

The object key gets converted into a string.

With Map:

const map = new Map();

const key = { id: 1 };

map.set(key, "Student");

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

Output

"Student"

Map allows objects, functions, and other data types as keys without converting them to strings.

What is a Set in JavaScript?

A Set is a collection of unique values.

It automatically removes duplicates.

Creating a Set

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

console.log(numbers);

Output

Set(5) { 1, 2, 3, 4, 5 }

Notice that duplicate values are removed automatically.

Adding Values

numbers.add(6);
numbers.add(7);

Checking Values

console.log(numbers.has(3));

Output

true

Deleting Values

numbers.delete(2);

Getting Set Size

console.log(numbers.size);

Why Not Just Use Arrays?

Consider this example:

const skills = [
  "JavaScript",
  "React",
  "JavaScript",
  "Node.js"
];

console.log(skills);

Output

[
  "JavaScript",
  "React",
  "JavaScript",
  "Node.js"
]

Arrays allow duplicate values.

To remove duplicates:

const uniqueSkills = [...new Set(skills)];

console.log(uniqueSkills);

Output

[
  "JavaScript",
  "React",
  "Node.js"
]

Set makes handling unique values much easier.

Map vs Object

Feature	Map	Object
Stores key-value pairs	✅	✅
Any data type as key	✅	❌
Maintains insertion order	✅	Limited
Built-in size property	✅	❌
Easy iteration	✅	❌
Better for frequent additions/removals	✅	❌

Set vs Array

Feature	Set	Array
Stores unique values	✅	❌
Duplicate values allowed	❌	✅
Fast existence check	✅	❌
Indexed access	❌	✅
Maintains insertion order	✅	✅

When Should You Use Map?

Use Map when:

• You need key-value storage.

• Keys can be objects, functions, or any data type.

• Frequent insertion and deletion are required.

• You want better iteration support.

Example Use Cases

• User cache

• Student records

• Product lookup tables

• API response storage

const userCache = new Map();

userCache.set("user1", {
  name: "Ashish"
});

When Should You Use Set?

Use Set when:

• You need unique values.

• You want to remove duplicates.

• Fast existence checking is important.

Example Use Cases

• Unique email addresses

• Unique tags

• Unique product categories

• Tracking visited pages

const visitedPages = new Set();

visitedPages.add("/home");
visitedPages.add("/about");
visitedPages.add("/home");

console.log(visitedPages);

Output

Set(2) { "/home", "/about" }

Visual Representation of Map

Map

+---------+-----------+
| Key     | Value     |
+---------+-----------+
| 1       | Ashish    |
| 2       | Rahul     |
| 3       | Priya     |
+---------+-----------+

Think of Map as a table where every key points to a value.

Visual Representation of Set

Set

+-----------+
| Ashish    |
| Rahul     |
| Priya     |
+-----------+

Duplicate values are ignored.