Understand Maps() and WeakMap() in Brief – JavaScript Tutorial


In this article, we will take a brief look at Maps() and WeakMap(). We will understand what is the use of maps and WeakMap in the advanced javascript. Well, along with that we also introduce weakmap(). So we will first learn the Maps() and WeakMaps(). In the previous lecture, we had learned polymorphism and Inheritance. You can read these articles also. So let’s begin with the Maps().

Maps()

ECMAScript 6 a new data structure introduced which is maps. The map is just like an object that They can map a key to a value. When you need to map a key to a value you would turn into an object. Because object allows you to map string keys to object values of any type.

So then why JavaScript need to introduce a new data structure?. If you wanted to map a key to a value than the object has some drawback.

  1. The prototypal nature of the object that there could be mappings that you didn’t intend.
  2. As you know in object key must be a symbol or string. This nature preventing you from mapping object to a value.
  3. There is no easy way to know How many mapping there are in the object.
  4. You also no object do not guarantee Any order to their properties.

So the map object address this scarcity. The map of Object hold a key-value pair and remember The origin insertion of the keys. You can use any value as a key or value in the map. You are free to specify any type of values I primitive or object when you are specifying keys or values to the map. To get the size of the map you can use size property.

Now let’s understand how to create maps.

When you wanted to create a map you need to understand the two methods first set() and get(). Set method is used to set the value for the key in the map object. And get method is used to Return a value associated with the key,  undefined if there is none.

Now let’s take an example and understand map object well.

For example,

In the above example, we had created Map() using a new keyword. So You can see we are just creating an instance of the Map() object and call its constructor. Then we had created three objects. After that, we called Map() set() Method and set map elements. So we specify key first and then specify a value of that key.

Then using the get() method we called key values. You can see I had specified NaN key also. Because NaN is the type of Number. We also print the type of NaN on the console.

There is another way to create Map. Calling the Constructor you can specify an array in that constructor. Just pass an argument of an array.

Iterating Maps

To iterate maps we have for of loop. Using for of loop you can iterate maps collection. like this,

There is another way to iterate maps object using ForEach() Method.

 

Weak Map()

The weak map is identical to the map object. But there is three disparity between maps and weak maps.

  1. The weak map key must be an object.
  2. The weak map cannot be iterated or cleared.
  3. keys in the weak map can be garbage collected.

Suppose you have an object that is a key in a map, JavaScript will Keep that object in memory as long as the map is in existence. But not so with a  weak map. The weak map is a target to the garbage collection. Because of this, a weak map cannot be iterated or cleared.

Garbage Collection

Garbage collection in javascript performs automatically and it is invisible to us. The garbage collection take care of memory management in JavaScript. 

Suppose you have an object and this object has two properties. the first property you can access with the reference and the second property doesn’t have any reference to access it. In that situation, JavaScript will put some junk data in the unreachable property.  this property called garbage value..

For example,

Now JavaScript will put garbage value in the name property. This is all happened behind the scene. Right. Now let’s move on to the main topic and understand how to create and weak map object.

The most important thing is weak map is used to store private keys in the object instance.

For example,

In the above example, we had created weakMap() using an instance. Then just after that, we declare an empty object using the curly braces. After that, we had called the WeakMap set() Method. Set method will store key and value in the weak map.

Then we called get() method and specify an object in the parameter.

Now I hope you understand what we had learned so far. Maps() and WeakMaps() both are really very important to know before we move ahead. That is all for this article, we will see you in the next one.