Map and Set in JavaScript

What Map is.

A Map is a data structure that stores key-value pairs. It's similar to an object, but it's more powerful than an object because it stores the order of values in the same order they were inserted. It can store any type of value as a key, such as functions, primitive values, and others. Furthermore, it only stores unique values, not duplicates.

It has several methods that are very helpful in retrieving data, such as setting a data set, checking if a value is contained within it, and checking the total number of values within it (returning a count). There are several other methods that make a Map even more powerful.
So, a Map is similar to a HashMap or Dictionary in other languages. Furthermore, just as we iterate over objects, we can iterate over each value in a Map and retrieve them.
So, this is a basic overview of what a Map is in JavaScript.
Below is the code to declare it and insert values into it. Next, we'll look at some methods to access the values.

const map = new Map([
   ['name', 'Nikhil'],
   ['class', 'Bsc IT'],
   ['Roll no.', 252525],
   ['city', 'Pathankot']
]);

console.log(map);

So this is a one way to insert value in Map , but we have one more another way to insert value using set method, because some time value come dynamically so that's by we have set method to insert value in it.

const map = new Map();

map.set('Name', 'Nikhil');
map.set('class', 'Bsc It');
map.set('Roll no', 252525);

console.log(map);

So we have more methods as we discussed above .

The get method is used to retrieve a specific value. Whatever key name we pass to get, it will return that value.
The has method is used to check if the key we passed is in the Map.
The delete method is used to delete a specific key.
The clear method is used when we want to delete all values within the Map.
The size method returns the total number of data entries in the Map.

What Set is.

So basically, you can understand Set similar to Map, but it stores values like an array instead of key-value pairs. It provides features similar to Map, like it does not allow duplicate values. If a duplicate value is inserted, it ignores it.

Also, it maintains insertion order, meaning the data is accessible in the same structure and order in which it was inserted. You can access it easily. It also has many methods like Map that make it powerful.
Before starting, the values inside a Set can be iterated using loops like for...of or the forEach method. Another thing is that even though Set stores data like an array, it does not support indexing. That means to access elements, you have to iterate over it.

const set = new Set(['Nikhil', 'Hitesh', 'Chai code', 'Nikhil']);

console.log(set);

The first method is add(), which is obviously used to add a new value into the Set.

The second method is delete(), where you pass a specific value, and if it exists, it gets deleted.

The third method is clear() obvious. Once you use this method, all elements inside the Set are deleted and it becomes empty.

The fourth method is has() , which checks whether a value exists in the Set. If it exists, it returns true; otherwise, it returns false.

There are also many more methods that make Set powerful in JavaScript.

Difference between Map and Object.

So we have many differences between Map and Object because of which Map is more powerful.

For example, in an object we can only use strings and symbols as keys, nothing else. If we try to use something like a number, it does not behave properly and becomes complex to work with. But inside a Map, you can use any type of data as a key.

The second difference is that in an object, the data inserted does not have a proper order, so it becomes complex to access the data. But in a Map, the data is stored in the same order in which it was inserted.

The third difference is that if you want to check the total length of data in an object, first you have to convert it into an array and then find its length. But in a Map, we have a direct size property that tells us the total number of values.

There is also a difference in iteration, in how we retrieve values from both.

So these are some basic differences.

Difference between Set and Array.

Now, let's look at the difference between Array and Set.

The basic difference is that Set does not store duplicate values. If duplicate values are added, they are ignored. But in an array, duplicate values can exist, and to remove them, we have to apply operations, which can become complex.

Another reason is that Set maintains the sequence in which data was inserted, so retrieving data becomes easier. But in an array, there is no strict insertion format, data just gets inserted, and for insertion, deletion, and updating, we need to write separate logic and operate on it.

One more main difference is that Set does not provide index-based access to elements. Whenever you want to access an element, you have to iterate over the Set. But an array provides indexing, so if you need a specific element, you can access it directly using its index.

When to use Map and Set.

So, to answer the question of when we use a Map and when we use a Set, since I've discussed both in a very simplified way above, let me give a short and simple answer.

We use a Map when we need unique key-value pair data, with no duplicate keys, and fast access and maintain insertion order.
We use a Set when we need to store a collection of unique data, like an array, with no duplicates and also maintaining insertion order.
So, this is a simple explanation of when to use a Map and when to use a Set. If you still don't understand, read it again step by step from the beginning.

💡

So with my above explanation i hope you understand what i learn and what's my thought process on Map and Set in JavaScript.