Skip to main content

Command Palette

Search for a command to run...

Map and Set in JavaScript

Understanding Map and Set in JavaScript

Published
•4 min read
Map and Set in JavaScript
G
I enjoy blending technology with business to build solutions that create real impact. I’m fascinated by how technology empowers people, businesses, and startups. I believe thoughtful use of technology quietly improves lives, and that belief fuels everything I build and explore 💻.

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.

What Map is

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.

What Set is

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.

Problem with traditional objects

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 vs Object

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.

Problem with arrays

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 vs Array

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.

When to use Map and Set

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.

Final clarity

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.