Map and Set in JavaScript

What Map Is

Map is a special data structure in JavaScript used for storing key-value pairs. At first glance, it may look similar to objects. Example:

const user = {
  name: "Shubham"
};

But Map provides more flexibility and better control in certain situations. Example:

const map = new Map();

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

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

Output:

Shubham

Understanding the Structure of Map

A Map stores data in:

key → value

format. Example:

map.set("age", 21);

Here:

• "age" is the key

• 21 is the value

Common Map Methods

Some commonly used methods:

set()
get()
has()
delete()
clear()
size

Example of Multiple Values

Example:

const userMap = new Map();

userMap.set("name", "Shubham");
userMap.set("age", 21);

console.log(userMap);

What Set Is

Set is another special JavaScript data structure. Its main purpose is:

Store unique values only.

Example:

const set = new Set();

set.add(1);
set.add(2);
set.add(2);

console.log(set);

Output:

Set(2) {1, 2}

Notice:

• duplicate value 2 is ignored

Because sets only allow unique values.

Understanding the Real Purpose of Set

Arrays can contain duplicates. Example:

[1, 1, 2, 2, 3]

But sometimes developers only want unique values. That is exactly where Set becomes useful.

Common Set Methods

Common methods:

add()
has()
delete()
clear()
size

Example:

const fruits = new Set();

fruits.add("apple");
fruits.add("banana");
fruits.add("apple");

console.log(fruits);

Output:

Set(2) {'apple', 'banana'}

Difference Between Map and Object

Many beginners wonder:

“If objects already store key-value pairs, why does Map exist?”

Because Map solves several limitations of objects.

1. Key Types

Objects

Object keys are mostly strings or symbols.

Example:

const obj = {};

obj[1] = "Hello";

console.log(obj);

Internally:

• 1 becomes "1"

Map

Maps allow any data type as keys.

Example:

const map = new Map();

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

console.log(map);

Even objects and functions can become keys.

2. Better Iteration

Maps are easier to iterate.

Example:

for (const [key, value] of map) {
  console.log(key, value);
}

Objects require extra methods like:

• Object.keys()

• Object.entries()

3. Size Property

Objects do not directly provide size. Example:

Object.keys(obj).length

But maps provide:

map.size

Much cleaner.

4. Performance

For frequent:

• insertions

• deletions

• dynamic key management

Maps often perform better than objects.

Difference Between Set and Array

Both store collections of values. But behavior differs significantly.

Arrays Allow Duplicates

Example:

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

Duplicates remain.

Sets Remove Duplicates

Example:

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

console.log(set);

Output:

Set(2) {1, 2}

Arrays Maintain Indexed Structure

Arrays use indexes. Example:

arr[0]
arr[1]

Sets do not use indexes directly.

Arrays Have More Built-in Methods

Arrays support methods like:

• map()

• filter()

• reduce()

Sets are mainly focused on uniqueness.

Converting Set to Array

Example:

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

const arr = [...set];

console.log(arr);

Output:

[1, 2, 3]

Removing Duplicates Using Set

Very common interview trick. Example:

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

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

console.log(unique);

Output:

[1, 2, 3]

When to Use Map

Use Map when:

• dynamic keys are needed

• keys are not just strings

• frequent insert/delete operations happen

• iteration is important

Real Use Cases of Map

Examples:

• caching systems

• storing metadata

• tracking user sessions

• object-based keys

• fast lookups

Example with Object Keys

Example:

const user = {
  id: 1
};

const map = new Map();

map.set(user, "User Data");

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

Objects cannot handle this cleanly.

Maps can.

When to Use Set

Use Set when:

• unique values are required

• duplicates should be removed

• fast existence checking is needed

Real Use Cases of Set

Examples:

• removing duplicates

• tracking unique visitors

• storing selected IDs

• preventing repeated values

Fast Lookup with Set

Example:

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

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

Output:

true

Common Beginner Mistake

Many beginners treat Map exactly like objects.But maps are different because:

• keys can be any type

• order is preserved

• iteration is cleaner

Another Common Mistake

Beginners sometimes expect:

set[0]

to work. But sets are not index-based collections like arrays.

Why Modern JavaScript Introduced These Structures

As applications became larger, developers needed better data structures for:

• performance

• flexibility

• cleaner APIs

Map and Set solve many problems traditional objects and arrays struggle with.

Final Understanding

Map is a key-value data structure with flexible key support and better iteration features.
Set is a collection that stores only unique values.
Compared to:

• objects → maps provide more flexibility

• arrays → sets provide uniqueness

Understanding when to use:

• objects

• arrays

• maps

• sets

is an important part of writing efficient and scalable modern JavaScript applications.