JavaScript WeakMap Tutorial

In this section, we will learn what the WeakMap object is and how to use it in JavaScript.

Note: in this section, we’re assuming you’re familiar with the Map object in JavaScript.

What is WeakMap in JavaScript?

The `WeakMap` is a constructor function that creates map objects just like the `Map` constructor function.

But the main difference is that we cannot use values of primitive types as the keys in a `WeakMap` object.

Basically, only values of type `object` are allowed to be used in a `WeakMap` object.

How to Create WeakMap in JavaScript?

Before getting into more details, first let’s see an example of how to create a `WeakMap` object:

Example:

const obj1 ={
  firstName:"John"
}
const obj2 = {
  firstName: "Jack"
}
const obj3 = {
  firstName : "Omid"
}
const map = new WeakMap();
map.set(obj1 , "John");
map.set(obj2, "Jack");
map.set(obj3, "Omid");

console.log(map.get(obj1));
console.log(map.get(obj2));
console.log(map.get(obj3));

Output:

John

Jack

Omid

Here, we used the `WeakMap` constructor function to create an object.

After that, via the `set()` method, we’ve added 3 elements to the weak map. As you can see the keys for all of them is of type Object.

At the end, we used the `get()` method and sent the values of all three keys of the map to the browser’s console.

Example: creating WeakMap in JavaScript

let obj1 ={
  firstName:"John"
}
let obj2 = {
  firstName: "Jack"
}
let obj3 = {
  firstName : "Omid"
}
const map = new WeakMap();
map.set(obj1 , "John");
map.set(obj2, "Jack");
map.set(obj3, "Omid");

obj1 = null;
obj2 = null;
obj3 = null;

setTimeout(()=>console.log(map),10000)

Output:

undefined

undefined

undefined

Here, we refactored the example at the beginning of this section.

The keys that were used in the weak map are also referenced by the `obj1`, `obj2`, and `obj3` variables, respectively.

However, by the time the execution engine executes the three statements below:

obj1 = null;

obj2 = null;

obj3 = null;

Besides the weakmap, no external variables or properties are referring to the objects that are used as the keys of the map.

So at this point, the garbage collector sees the opportunity to remove the key-objects from the memory.

For this reason, when the last statement ran (after 10 seconds), the content of the target weak map was empty.

Notes:

  • The garbage collector won’t run immediately, but it runs periodically and once in a while. So it might take a couple of seconds to run and remove those unwanted objects.
  • In the last statement, we use the `setTimeOut()` function to run a statement at 10 seconds later. In the setTimeout() section, we’ve explained how this function works.

JavaScript WeakMap Methods

The `WeakMap` constructor has only these methods:

  • get(key)
  • set(key, value)
  • delete(key)
  • has(key)

So the other methods that exist in the `Map` constructor don’t exist in the `WeakMap`.

These methods are:

  • keys()
  • values()
  • entries()
  • forEach()
  • size //This was a property and not a method.

Example: using WeakMap has() method in JavaScript

let obj1 ={
  firstName:"John"
}
let obj2 = {
  firstName: "Jack"
}
let obj3 = {
  firstName : "Omid"
}
const map = new WeakMap();
map.set(obj1 , "John");
map.set(obj2, "Jack");
map.set(obj3, "Omid");

console.log(map.has(obj1));
console.log(map.has(obj2));
console.log(map.has({}));//an empty object

Output:

true

true

false

Leave a Reply