Search for a command to run...
Understanding Map and Set in JavaScript
No comments yet. Be the first to comment.
Expo Router and React Navigation for scalable React Native apps - auth flows, layouts, and developer workflow.
Understanding how production React Native apps scale using better architecture and Expo Router.
Understanding string polyfills, built-in methods, and interview logic in JavaScript.
Understanding file storage, static serving, and upload handling in Express.js.
Understanding Express routing, requests, responses, and server handling basics.
On this page
If you’ve been working with JavaScript, you’ve mostly used objects and arrays to store data. Objects are used for key value pairs and arrays are used for lists. That works fine in most cases, but there are some limitations with both. That is where Map and Set come into picture. They are built in data structures that solve some specific problems which objects and arrays do not handle well.
So before jumping into Map and Set directly, it is important to understand why they even exist. Objects restrict keys to strings or symbols, and arrays allow duplicate values. In many real scenarios, we want more flexibility in keys or we want to ensure uniqueness in data. That is exactly what Map and Set help with.
Map is a collection of key value pairs, similar to objects, but with more flexibility. In Map, keys can be of any type, not just strings. That means you can use numbers, objects, or even functions as keys.
const map = new Map();
map.set("name", "Gaurang");
map.set(1, "One");
console.log(map.get("name"));
console.log(map.get(1));
Here we are storing values using different types of keys. This is something that objects do not support directly.
Another important thing is that Map maintains insertion order, so the order in which you add entries is preserved.
Set is a collection of unique values. It automatically removes duplicates, which is something arrays do not do.
const set = new Set();
set.add(10);
set.add(20);
set.add(10);
console.log(set);
Even though we added 10 twice, it will only be stored once. That is because Set only keeps unique values.
This makes Set very useful when you want to remove duplicates from a list or ensure that only unique values are stored.
Objects are useful, but they have limitations. Keys are always treated as strings, even if you use numbers. Also, objects are not designed for frequent additions and deletions in the same way Map is.
const obj = {};
obj[1] = "One";
obj["1"] = "Duplicate";
console.log(obj);
Here both keys will be treated the same, because object keys are converted to strings.
Map provides better flexibility compared to objects when it comes to key value storage. Keys in Map can be of any type, whereas in objects they are limited. Map also has built in methods like set, get, has, and delete which make operations more structured.
const map = new Map();
map.set({ id: 1 }, "User1");
map.set({ id: 2 }, "User2");
console.log(map.size);
This kind of usage is not possible with objects in a reliable way because objects do not handle non string keys properly.
Arrays allow duplicate values, which is not always desired. If you are storing data where uniqueness matters, arrays require extra logic to handle duplicates.
const numbers = [10, 20, 10, 30];
console.log(numbers);
Here duplicates are allowed, and you would need to manually filter them out if required.
Set solves this problem by ensuring uniqueness automatically. It stores only unique values and ignores duplicates.
const numbers = new Set([10, 20, 10, 30]);
console.log(numbers);
Now you do not need extra logic to remove duplicates. Set handles it internally.
Map is useful when you need flexible key value storage and when keys are not just strings. It is also helpful when you need to maintain insertion order and perform frequent operations like add, delete, and lookup.
Set is useful when you want to store unique values and avoid duplicates without writing extra logic. It is commonly used when working with lists where repetition is not allowed.
Map and Set are alternatives to objects and arrays for specific use cases. Map improves key value handling by allowing any type of keys and providing better control over operations. Set ensures uniqueness and simplifies working with collections of values where duplicates are not needed.
So instead of forcing everything into objects and arrays, using Map and Set where they fit makes the code cleaner and more efficient.