JavaScript provides many data structures to store and manage data.

Most beginners start with:

Objects
Arrays

But modern JavaScript also provides two powerful data structures:

These solve many problems that traditional objects and arrays cannot handle efficiently.

In this blog, we will learn:

What Map is
What Set is
Difference between Map and Object
Difference between Set and Array
When to use Map and Set
Real-world examples

Everything will be explained from basic to advanced in simple language.

Why Map and Set Were Introduced

Before ES6, developers mainly used:

Objects for key-value storage
Arrays for collections

But both had limitations.

Problems with Traditional Objects

Objects have issues like:

Keys are converted to strings
No direct size property
Iteration is less flexible
Insertion order is not always reliable

Problems with Arrays

Arrays allow duplicate values.

Example:

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

Duplicates exist.

Sometimes we only want unique values.

This is where Set becomes useful.

What is Map?

A Map is a collection of key-value pairs.

It stores data like objects, but with extra flexibility.

Basic Map Syntax

const map = new Map();

Adding Values in Map

We use .set() method.

Example

const user = new Map();

user.set("name", "Rahul");
user.set("age", 22);

console.log(user);

Output

Map(2) { 'name' => 'Rahul', 'age' => 22 }

Getting Values from Map

We use .get().

Example

const user = new Map();

user.set("name", "Rahul");

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

Output

Rahul

Checking Values in Map

We use .has().

Example

const user = new Map();

user.set("city", "Delhi");

console.log(user.has("city"));

Output

true

Removing Values from Map

We use .delete().

Example

const user = new Map();

user.set("name", "Rahul");

user.delete("name");

console.log(user);

Output

Map(0) {}

Map Size

Maps provide direct size support.

Example

const map = new Map();

map.set("a", 1);
map.set("b", 2);

console.log(map.size);

Output

Objects vs Map

Objects also store key-value pairs.

So why use Map?

Object Example

const obj = {
   name: "Rahul"
};

Map Example

const map = new Map();

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

Difference Between Map and Object

Map	Object
Keys can be any datatype	Keys are strings/symbols
Ordered	Not fully reliable historically
Direct size property	No size property
Better iteration	Less flexible iteration
Built for data storage	Built for general objects

Important Feature of Map

Map allows any datatype as key.

Example

const map = new Map();

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

console.log(map);

Output

Map(2) { 1 => 'Number Key', true => 'Boolean Key' }

Object Keys Become Strings

Example:

const obj = {};

obj[1] = "Hello";

console.log(obj);

Output

{ '1': 'Hello' }

Object converted number key into string.

Map preserves original datatype.

Iterating Over Map

Example

const map = new Map();

map.set("name", "Rahul");
map.set("city", "Delhi");

for(let [key, value] of map) {

   console.log(key, value);

}

Output

name Rahul
city Delhi

What is Set?

A Set is a collection of unique values.

This means:

Duplicate values are automatically removed.

Basic Set Syntax

const set = new Set();

Adding Values in Set

We 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 value 2 was removed automatically.

Set Uniqueness Diagram

Input Values:
1 → 2 → 2 → 3 → 3

Set Stores:
1 → 2 → 3

Why Set is Useful

Sets help when we need:

Unique values
Duplicate removal
Fast searching

Converting Array to Set

Very common use case.

Example

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

const unique = new Set(numbers);

console.log(unique);

Output

Set(3) { 1, 2, 3 }

Removing Duplicates from Array

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

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

console.log(uniqueNumbers);

Output

[ 1, 2, 3 ]

Checking Values in Set

We use .has().

Example

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

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

Output

true

Removing Values from Set

We use .delete().

Example

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

set.delete(2);

console.log(set);

Output

Set(2) { 1, 3 }

Set Size

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

console.log(set.size);

Output

Difference Between Set and Array

Set	Array
Stores unique values	Allows duplicates
No indexing	Indexed structure
Faster searching	Slower searching sometimes
Better for uniqueness	Better for ordered lists

Array Example

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

Duplicates allowed.

Set Example

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

Duplicates removed automatically.

Iterating Over Set

Example

const set = new Set(["JS", "React", "Node"]);

for(let value of set) {

   console.log(value);

}

Output

JS
React
Node

Real World Example of Set

Suppose users like posts multiple times.

We only want unique users.

Example

const likes = new Set();

likes.add("Rahul");
likes.add("Rahul");
likes.add("Aman");

console.log(likes);

Output

Set(2) { 'Rahul', 'Aman' }

Real World Example of Map

Suppose we store user information.

Example

const users = new Map();

users.set(101, "Rahul");
users.set(102, "Aman");

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

Output

Rahul

When to Use Map

Use Map when:

You need key-value storage
Keys are dynamic
Keys are different datatypes
Frequent insertion/deletion happens

When to Use Set

Use Set when:

Unique values are needed
Duplicate removal is required
Fast searching matters

Advanced Map Example

const map = new Map();

const objKey = { id: 1 };

map.set(objKey, "Object as Key");

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

Output

Object as Key

Objects can also be keys in Map.

Advanced Set Example

const letters = new Set();

letters.add("a");
letters.add("b");
letters.add("a");

console.log([...letters]);

Output

[ 'a', 'b' ]

Common Methods of Map

Method	Purpose
`.set()`	Add value
`.get()`	Get value
`.has()`	Check existence
`.delete()`	Remove value
`.clear()`	Remove all
`.size`	Total entries

Common Methods of Set

Method	Purpose
`.add()`	Add value
`.has()`	Check value
`.delete()`	Remove value
`.clear()`	Remove all
`.size`	Total values

Internal Visualization

Map:
Key → Value

Set:
Unique Values Only

Conclusion

Map and Set are powerful modern JavaScript data structures.

They solve many problems that traditional:

Objects
Arrays

cannot handle efficiently.

Map is best for flexible key-value storage.

Set is best for unique collections.

Understanding Map and Set helps developers write:

Cleaner code
Faster logic
Better optimized applications

These structures are heavily used in modern JavaScript and React applications.

Thank you for reading this blog.

I hope this helped you understand Map and Set in JavaScript from basic to advanced concepts in a simple and practical way.

Your feedback is always appreciated.

Command Palette

Why Map and Set Were Introduced

Problems with Traditional Objects

Problems with Arrays

What is Map?

Basic Map Syntax

Adding Values in Map

Getting Values from Map

Checking Values in Map

Removing Values from Map

Map Size

Objects vs Map

Object Example

Map Example

Difference Between Map and Object

Important Feature of Map

Object Keys Become Strings

Iterating Over Map

What is Set?

Basic Set Syntax

Adding Values in Set

Set Uniqueness Diagram

Why Set is Useful

Converting Array to Set

Removing Duplicates from Array

Checking Values in Set

Removing Values from Set

Set Size

Difference Between Set and Array

Array Example

Set Example

Iterating Over Set

Real World Example of Set

Real World Example of Map

When to Use Map

When to Use Set

Advanced Map Example

Advanced Set Example

Common Methods of Map

Common Methods of Set

Internal Visualization

Conclusion

Comments

More from this blog