Map and Set in JavaScript Explained Simply
Understand how Map and Set work, how they differ from objects and arrays, and when to use them in real projects
Introduction
When you start learning JavaScript, you mostly use objects and arrays to store data. They work well in many cases, but sometimes they create problems. For example, objects do not always behave predictably with keys, and arrays can store duplicate values even when you do not want them.
To solve these kinds of issues, JavaScript introduced Map and Set. These are modern data structures that make certain tasks easier and cleaner.
In this blog, we will understand what Map and Set are, how they are different from objects and arrays, and when you should use them.
What is Map
A Map is a collection of key value pairs, just like an object. But it is more flexible and reliable.
In a Map, you can use any type of value as a key. It can be a string, number, boolean, or even an object.
Example:
const user = new Map();
user.set("name", "Koushik");
user.set(1, "ID Number");
console.log(user.get("name")); // Koushik
Here, both a string and a number are used as keys. This is not possible in a normal object in a clean way.
Important features of Map:
It keeps the order of elements
It allows any type of key
It has built in methods like set, get, has, delete
What is Set
A Set is a collection of unique values. This means it automatically removes duplicates.
Example:
const numbers = new Set([1, 2, 2, 3, 4, 4]);
console.log(numbers); // {1, 2, 3, 4}
Even though we added duplicate values, the Set only keeps unique ones.
Important features of Set:
It only stores unique values
It keeps insertion order
It has methods like add, delete, has
Problems with Objects and Arrays
Before Map and Set, developers used objects and arrays for everything.
Problems with objects:
Keys are always converted to strings
No guaranteed order in older behavior
Difficult to get size directly
Example:
const obj = {};
obj[1] = "one";
obj["1"] = "another one";
console.log(obj); // { "1": "another one" }
Here, both keys become the same string.
Problems with arrays:
They allow duplicate values
Searching can be slow for large data
No built in way to ensure uniqueness
Difference between Map and Object
Map and Object may look similar, but they are different in important ways.
Map allows any type of key
Object only allows string or symbol keys
Map keeps insertion order
Object order was not always reliable
Map has a size property
Object needs manual counting
Map is better for frequent additions and deletions
Difference between Set and Array
Set and Array both store collections, but they behave differently.
Set stores only unique values
Array allows duplicates
Array has index based access
Set does not use indexes
Array has many methods like map, filter
Set has simpler methods like add, has
Set is best when you want unique values
Array is best when order and indexing matter
When to Use Map
Use Map when:
You need key value pairs
Keys are not just strings
You need better performance for adding and removing data
You want to maintain insertion order
Example use case:
Storing user data where keys can be objects or IDs
When to Use Set
Use Set when:
You want only unique values
You need to remove duplicates from an array
You want to check if a value exists quickly
Example:
const arr = [1, 2, 2, 3];
const unique = new Set(arr);
console.log(unique); // {1, 2, 3}
Conclusion
Map and Set are powerful tools that solve real problems in JavaScript. Map gives you a better way to store key value data, and Set helps you manage unique values easily.
If you understand when to use them, your code will become cleaner, faster, and easier to manage.
