Map and Set in JavaScript
In JavaScript, we often store and manage data using objects and arrays. But in some cases, these traditional structures are not the best choice.
To solve this, JavaScript introduced two important data structures:
Map
Set
These help us handle data more efficiently in specific situationsProblems with Traditional Objects and Arrays
Before learning Map and Set, let’s understand the limitations of objects and arrays.
Problems with Objects:
Keys are always strings (or converted to strings)
Not ideal for complex key types
No guaranteed order in older behavior
Problems with Arrays:
Allow duplicate values
Searching can be slow for large data
Not ideal for unique collections
Because of these limitations, Map and Set were introduced.
What is a Map?
A Map is a collection of key-value pairs, just like an object, but more powerful.
Simple meaning:
Map allows storing data where keys can be of any type (not just strings).
Example of Map
const map = new Map();
map.set("name", "Rahul");
map.set(1, "One");
map.set(true, "Boolean Value");
console.log(map.get("name")); // Rahul
console.log(map.get(1)); // One
Map Key-Value Storage
Key → Value
"name" → "Rahul"
1 → "One"
true → "Boolean Value"
Unlike objects, keys are flexible in Map.
What is a Set?
A Set is a collection of unique values.
Set stores only unique values (no duplicates allowed).
Example of Set
const set = new Set();
set.add(10);
set.add(20);
set.add(20);
set.add(30);
console.log(set);
Output:
[10, 20, 30]
Duplicate 20 is ignored.
Difference Between Map and Object
| Feature | Map | Object |
|---|---|---|
| Key types | Any type (object, number) | Mostly strings/symbols |
| Order | Maintains insertion order | Not reliable in all cases |
| Size | map.size | Manual counting needed |
| Performance | Better for frequent updates | Slower in some cases |
Simple Explanation:
Object = traditional key-value storage
Map = modern, flexible key-value storage
Difference Between Set and Array
| Feature | Set | Array |
|---|---|---|
| Duplicates | Not allowed | Allowed |
| Order | Maintains insertion order | Maintains order |
| Use case | Unique values only | List of items |
Simple Explanation:
Array = List where repetition is allowed
Set = Filtered list with only unique items
When to Use Map
You need key-value storage
Keys are not just strings
You frequently add/remove data
Order matters
Real Example:
Storing user sessions
Caching data
Storing configuration settings
When to Use Set
You need unique values
You want to remove duplicates
You need fast lookup of existence
Real Example:
Removing duplicate items from list
Tracking unique users
Storing unique IDs
Conclusion
Map and Set are powerful JavaScript data structures that solve limitations of objects and arrays. Map is best for flexible key-value storage, while Set is best for maintaining unique values.
Use Map for structured data storage and Set for uniqueness, and your JavaScript code becomes more efficient and clean.
