Map, WeakMap, Set and WeakSet in JavaScript

As we all know that more than 70% of javascript developers use only objects for collecting and maintaining the data in their projects. But it is also true that most of the javascript developers don’t use the new collection objects like map and set.

In this article, we will be talking about some of the interesting new features from 2015 like Map, Set, Weak Map, and Weak Set.

Objects in Javascript 

Before talking about the topics mentioned above first we will talk about how to use objects in javascript.

I am sure that most of you who are reading this article at this moment know about how to use objects. But in this article, our main focus is to make beginners also understand the topic in an efficient way so we are covering the bare minimum basics also. Let us understand it with the help of an example:

In the above example we have made an youtube object whose key and value are of string type. And we have extracted the value channelName and owner successfully using the . keyword.

As we know that a for in loop is used for looping through the object. You can generally access the value corresponding  to its key with the [] keyword.

In the above example we have discussed the following things:

• How to add the properties
• Procedure to loop over the objects

Map

Map is also known as a collection object in javascript which functions very similar to an object.

Let us see how to create a Map object:

The best part about map is it doesn’t requires anything to be created. You can easily add data by using a special property called as set. Set takes two arguments : the key as the first argument and the value as the second.

It doesn’t allows you to add existing data in it. If the value corresponding to the key of the new data has already existed in the map then the new data wont get added.

But if you want to overwrite the existing data then you can do it.

Looping over the object

As we all know that map is as iterable object which means that it can be mapped over with a for of statement.

One thing you should keep in mind that the map gives the data in an array form. You should generally destructure the array or access each index to get the key or the value.

For getting the keys or values only then you can use the methods for you to follow as well:

Remove Properties

If you want to remove the data from a Map object then all you need to do is call delete.

WeakMap

In general weak map has been originated from Map. It is called as  the Weak Map as the connection or relationship between it and the data object pointed to by its reference link is not as strong as that of map, so it is weak.

Difference 1: Key should be an object

const Youtuber = { name: 'Ajay' };
const weakMap = new WeakMap();
weakMap.set('John', 'Youtuber');
// Uncaught TypeError: Invalid value used as weak map key

The basic difference between Map and Weak Map is you cannot pass any value as the key into the Map object, but WeakMap is different. Weak Map only accepts an object as a key, otherwise it returns an error.

Difference 2 : It doesn’t support all the methods which are supported by Map.

The methods supported by Weak Map are as follows:

• delete
• get
• has
• set

Difference 3 : Data is completely wiped off when the garbage collection cleans up the reference

let Hotel = { name: "Novotel" };
const map = new Map();
const weakMap = new WeakMap();
map.set(Taj, 'Taj');
weakMap.set(Taj, 'Taj');
Taj = null;
/* Taj is garbage-collected */

Set

Set is very similar to map but set is more useful for a single value.

Add properties in a Set

const set = new Set();
set.add('Ajay);
set.add('Anuj');
set.add(BigInt(10));
// Set(4) {"Ajay", "Anuj", 10n}

Like Map set also doesn’t allows us to add the same value

set.add(15);
// Set(1) set.add(15);
set.add(15);
// Set(1) {15}

Loop over the object

for (const values of set) {
  console.dir(values);
}
// 'Ajay'
// 'Anuj'
// 10n
// 15
set.forEach(value => console.dir(value));
// 'Ajay'
// 'Anuj'
// 10n
// 15

Remove Properties:

To remove a property you can use the delete keyword. If the data is successfully removed then it returns true otherwise it returns false.

set.delete(5); 
// true
set.delete("Vivek");
// false;

Sets are quite helpful if you don’t want to add the same values into the array.

/* With Set */
const set = new Set();
set.add(10);
set.add(20);
set.add(30);
set.add(30);
set.add(30);
// Set {10, 20, 30}// Converting to Array
const arr = [ ...set ];
// [10, 20, 30]

 WeakSet

Weak Set is very similar to Weak Map as it looses access link to inner data if they’re garbage-collected.

let Youtuber = { name: "Ajay" };
const set = new Set();
const weakSet = new WeakSet();
set.add(Youtuber);
// Set {{...}}
weakSet.add(Youtuber);
// WeakSet {{...}}
Youtuber = null;
/* Youtuber is garbage-collected */

Once the object Youtuber is garabage collected , WeakSet has no way to access the data that has been referencing Youtuber. And WeakSet doesn’t support for-of and forEach as it is not iterable.

Conclusion

Most of the teams or companies are still not using Map or Set as they feel that it is not necessary to use it because arrays still do everything they want.

However Map and Set can be a powerful weapon in javascript depending upon the situation.