Map and Set in JavaScript
In this article we are gonna understand two very useful JavaScript data structures which are Map and Set. Initially most developers rely heavily on objects and arrays for almost everything and honestly that works perfectly fine in many situations. But slowly as applications grow larger certain problems start appearing. Duplicate handling becomes messy, object keys behave weirdly sometimes and managing dynamic data structures starts feeling less clean. And this is exactly where Map and Set become extremely useful because they were introduced specifically to solve some of these problems more cleanly.
What Map is
A Map is basically a special key-value data structure in JavaScript. Initially it may look extremely similar to objects because objects also store data using keys and values. But internally Maps behave differently and solve some important limitations that objects have. Suppose we create a normal object:
const user = {
name: "Alex",
age: 21
};
console.log(user.name);
// Alex
This already looks like key-value storage:
name ------> "Alex"
age ------> 21
So naturally many developers initially wonder:
"Then why does Map even exist?"
The reason is that objects were not originally designed purely for flexible key-value storage. Objects come with prototypes inherited properties and automatic string conversion of keys internally. Map on the other hand was designed specifically for storing key-value data cleanly. For example:
const userMap = new Map();
userMap.set("name", "Alex");
userMap.set("age", 21);
console.log(userMap.get("name"));
// Alex
console.log(userMap.has("age"));
// true
console.log(userMap.size);
// 2
Now something very important here is that Map keys can be almost anything.
const map = new Map();
map.set(1, "Number Key");
map.set(true, "Boolean Key");
const obj = {};
map.set(obj, "Object Key");
console.log(map.get(1));
// Number Key
console.log(map.get(true));
// Boolean Key
console.log(map.get(obj));
// Object Key
This becomes extremely useful in real applications because objects mostly convert keys into strings internally while Maps preserve the actual datatype of the key. Conceptually Map behaves somewhat like this:
"username" ------> "alex"
1 ------> "Number Key"
true ------> "Boolean Key"
{} ------> "Object Key"
And honestly once applications start dealing with dynamic data caching metadata or complex lookups Maps [ofcourse there would be hashing involved in the internal workings of this datatype but we won't delve much into that] often start feeling much cleaner than normal objects.
What Set is
A Set is another special data structure in JavaScript but instead of storing key-value pairs it stores only unique values. This uniqueness property is the main thing that makes Set useful. Suppose we use a normal array:
const numbers = [1, 2, 2, 3, 3, 4];
console.log(numbers);
// [1, 2, 2, 3, 3, 4]
Arrays allow duplicates completely normally. But Set behaves differently:
const numbers = new Set();
numbers.add(1);
numbers.add(2);
numbers.add(2);
numbers.add(3);
numbers.add(3);
numbers.add(4);
console.log(numbers);
// Set(4) { 1, 2, 3, 4 }
Even though:
numbers.add(2);
numbers.add(3);
were executed multiple times duplicates never got stored. Internally Set automatically ensures uniqueness. Conceptually:
Input:
1
2
2
3
3
4
Set Stores:
1
2
3
4
And honestly this becomes extremely useful because duplicate handling is a very common problem in real applications. Suppose you want unique usernames:
const users = new Set();
users.add("alex");
users.add("john");
users.add("alex");
console.log(users);
// Set(2) { 'alex', 'john' }
Or suppose you want to remove duplicates from an array which is one of the most common Set use cases:
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];
console.log(unique);
// [1, 2, 3, 4]
And honestly this is probably one of the cleanest duplicate-removal tricks in JavaScript.
Difference between Map and Object
Initially Map and Object look almost identical because both store data using keys and values. But internally they behave differently and are optimized for different situations. Objects are mainly designed for structured data.
const user = {
name: "Alex",
age: 21
};
This works perfectly fine for most normal cases. But objects also contain inherited properties internally. For example:
const user = {};
console.log(user.toString);
// [Function: toString]
Even though we never created:
toString
it still exists because objects inherit properties from prototypes internally. Map avoids these kinds of issues because it stores only what you explicitly put inside it. Maps also provide cleaner utility methods:
const map = new Map();
map.set("name", "Alex");
console.log(map.get("name"));
// Alex
console.log(map.has("name"));
// true
map.delete("name");
console.log(map.has("name"));
// false
And another important difference is key datatype support.
const obj = {};
obj[1] = "hello";
console.log(obj);
// { '1': 'hello' }
Notice how the number became a string internally. But Map preserves actual key types:
const map = new Map();
map.set(1, "hello");
console.log(map);
// Map(1) { 1 => 'hello' }
// :o,
Difference between Set and Array
Arrays and Sets also look somewhat similar initially because both store collections of values. But arrays are mainly optimized for ordered indexed data while Sets are optimized for uniqueness. Arrays allow duplicates naturally:
const arr = [1, 2, 2, 3];
console.log(arr);
// [1, 2, 2, 3]
Set removes duplicates automatically:
const set = new Set([1, 2, 2, 3]);
console.log(set);
// Set(3) { 1, 2, 3 }
Arrays also support indexing:
const arr = ["a", "b", "c"];
console.log(arr[0]);
// a
while Sets do not work using indexes. Instead Sets focus more on uniqueness and fast existence checking.
const set = new Set(["alex", "john"]);
console.log(set.has("alex"));
// true
And once uniqueness becomes the major priority, Sets usually feel cleaner than arrays.
Problems with traditional objects and arrays
Before Map and Set existed developers mostly relied heavily on objects and arrays for everything. Suppose duplicate removal was needed:
const arr = [1, 2, 2, 3, 3, 4];
const unique = arr.filter((value, index) => {
return arr.indexOf(value) === index;
});
console.log(unique);
// [1, 2, 3, 4]
This works perfectly fine but honestly compared to:
const unique = [...new Set(arr)];
the Set version feels significantly cleaner. Similarly objects were often used like hash maps:
const users = {};
users["alex"] = 21;
users["john"] = 24;
which also works but issues with inherited properties string conversion and iteration behavior still existed. Map and Set were introduced mainly to make these operations more predictable and cleaner.
When to use Map and Set
Map becomes useful whenever flexible key-value storage is needed especially when keys may not always be strings. Very common examples are:
Caching Systems
Metadata Storage
Session Data
Dynamic Configurations
Object-based Lookups
Set becomes useful whenever uniqueness matters. For example:
Unique Usernames
Unique IDs
Removing Duplicates
Tracking Active Users
Tags System
Conclusion
With this we now understand what Map and Set are in JavaScript and why they were introduced. We saw how Map improves key-value storage compared to traditional objects and how Set automatically maintains unique values unlike arrays. We also looked at the differences between Map vs Object and Set vs Array along with situations where these data structures become extremely useful in real applications.
I hope you enjoyed it!
Thank You.
