Map and Set in JavaScript

What is Map?

Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

Example

const userMap = new Map();
userMap.set('name', 'Rocky');
userMap.set(1, 'ID');
userMap.set(true, 'isLoggedIn');
console.log(userMap.get('name')); // Rocky

Methods and properties are:

• new Map() – creates the map.

• map.set(key, value) – stores the value by the key.

• map.get(key) – returns the value by the key, undefined if key doesn’t exist in map.

• map.has(key) – returns true if the key exists, false otherwise.

• map.delete(key) – removes the element (the key/value pair) by the key.

• map.clear() – removes everything from the map.

• map.size – returns the current element count.

Key Features:

• Keys can be objects, functions, or primitives

• Maintains insertion order

• Has built-in methods like .set(), .get(), .has(), .delete()

What is Set?

A Set is a special type collection – “set of values” (without keys), where each value may occur only once.

Example

const numbers = new Set([1, 2, 2, 3, 4, 4]);
console.log(numbers); // Set {1, 2, 3, 4}

Its main methods are:

• new Set([iterable]) – creates the set, and if an iterable object is provided (usually an array), copies values from it into the set.

• set.add(value) – adds a value, returns the set itself.

• set.delete(value) – removes the value, returns true if value existed at the moment of the call, otherwise false.

• set.has(value) – returns true if the value exists in the set, otherwise false.

• set.clear() – removes everything from the set.

• set.size – is the elements count.

The main feature is that repeated calls of set.add(value) with the same value don’t do anything. That’s the reason why each value appears in a Set only once.

Key Features:

• Stores only unique values

• Maintains insertion order

• Useful for removing duplicates from arrays

Difference Between Map and Object

Feature	Map	Object
Key Types	Any data type	Only strings & symbols
Order	Maintains insertion order	Not strictly guaranteed
Size	.size property	Object.keys().length
Iteration	Easily iterable	Needs extra methods
Performance	Better for frequent changes	Less optimized for dynamic ops

Why Map is Better in Some Cases:

Objects were originally not designed for heavy key-value storage. Maps solve issues like:

• Key collisions

• Non-string keys

• Cleaner iteration

Difference Between Set and Array

Feature	Set	Array
Duplicates	Not allowed	Allowed
Order	Maintains insertion order	Maintains order
Access	No index-based access	Index-based access
Methods	.add(), .has()	.push(), .includes()

Why Set is Useful:

Arrays allow duplicates, which can cause problems when:

• Tracking unique users

• Filtering duplicate values

When to Use Map

Use Map when:

• You need key-value pairs

• Keys are not just strings

• You want fast lookups and updates

• You need predictable iteration order

Example Use Case:

const cache = new Map();
cache.set(userId, userData);

When to Use Set

Use Set when:

• You need unique values

• You want to remove duplicates

• You need fast existence checks

Example Use Case:

const visitedPages = new Set();
visitedPages.add('/home');
visitedPages.add('/about');

Problems with Traditional Objects and Arrays

Objects:

• Keys are limited to strings/symbols

• No guaranteed order

• Not optimized for frequent additions/removals

Arrays:

• Allow duplicates

• Searching is slower (O(n))

• Not ideal for uniqueness or quick existence checks

Conclusion

• Map = Advanced Object

• Set = Unique Array

Both are designed to solve limitations of traditional JavaScript structures and should be part of every developer’s toolkit.

If you're building scalable apps or working with complex data, using Map and Set properly can make your code cleaner, faster, and more efficient.