Introduction

Map and Set are special data structures in JavaScript.

They help store and manage data more efficiently in certain situations.

What Is a Map?

Map stores data as:

key → value

pairs.

Similar to objects, but more flexible.

Creating a Map

const userMap = new Map();

Adding Values

Use:

set()

Example

const userMap = new Map();

userMap.set("name", "Ali");
userMap.set("age", 22);

console.log(userMap);

Accessing Values

Use:

get()

Example

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

Output

Ali

Map Key-Value Visualization

Important Map Methods

Example

const users = new Map();

users.set("admin", "Sara");

console.log(users.has("admin"));

users.delete("admin");

console.log(users);

Output

true
Map(0) {}

What Is a Set?

A Set stores only unique values.

Duplicates are automatically removed.

Creating a Set

const numbers = new Set();

Adding Values

Use:

add()

Example

const numbers = new Set();

numbers.add(1);
numbers.add(2);
numbers.add(2);

console.log(numbers);

Output

Set(2) { 1, 2 }

Duplicate 2 is ignored.

Set Uniqueness Representation

Why Set Is Useful

Good for:

• Removing duplicates

• Unique collections

• Fast existence checks

Remove Duplicate Array Values

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

const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers);

Output

[1, 2, 3]

Difference Between Map and Object

Object Example

const user = {
  name: "Ali"
};

Map Example

const userMap = new Map();

userMap.set("name", "Ali");

Map vs Object

Important Advantage of Map

Map allows any data type as keys.

Example

const map = new Map();

map.set(1, "Number Key");
map.set(true, "Boolean Key");

console.log(map);

Difference Between Set and Array

Array

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

Allows duplicates.

Set

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

Stores unique values only.

Set vs Array

Looping Through Map

const users = new Map();

users.set("name", "Ali");
users.set("city", "Lucknow");

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

Output

name Ali
city Lucknow

Looping Through Set

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

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

Output

1
2
3

When to Use Map

Use Map when:

• Storing dynamic key-value data

• Keys are not just strings

• Frequent additions/removals happen

When to Use Set

Use Set when:

• Uniqueness matters

• Removing duplicates

• Fast lookups are needed

Common Beginner Mistakes

Treating Set Like Array

Incorrect:

numbers[0]

Sets do not use indexes.

Using Object Instead of Map for Everything

Objects are fine for simple data.

Use Map for advanced key-value operations.

Practical Examples

Using Map

const products = new Map();

products.set(101, "Laptop");
products.set(102, "Phone");

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

Using Set

const emails = new Set();

emails.add("[email protected]");
emails.add("[email protected]");

console.log(emails);

Key Takeaways

Final Notes

Map and Set are heavily used in modern JavaScript applications because they provide cleaner and more efficient ways to manage data.

Especially useful in:

• APIs

• Caching

• Data processing

• Real-time applications

• Frontend state management