WeakMaps in Javascript

Yoel Macia — Thu, 12 Dec 2019 11:28:38 +0000

The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced. The keys must be objects and the values can be arbitrary values.

Let’s talk about we have a class person and a property name.

Here is the example,

class Person {  
   constructor(name) {  
       this.name = name;  
   }  
}

let Person1 = new Person("John");

console.log(Person1); // Person { name: 'John' }  
console.log(Person1.name); // John

We need to have a private variable in Javascript so that that name does not have access from the outside.

How we can do it ?

One solution would be to put underscores, for example,

class Person {  
   constructor(name) {  
       this.\_name = name;  
   }  
}

let Person1 = new Person("John");

console.log(Person1); // Person { name: 'John' }  
console.log(Person1.name); // Undefined

This brings with it the eternal struggle to warn everyone that underscoring cannot be changed or touched.

Another solution would be to use the data type Symbol(),

let s\_name = Symbol();

class Person {  
   constructor(name) {  
       this\[s\_name\] = name;  
   }  
}

let Person1 = new Person("John");

console.log(Person1); // Person { name: 'John' }  
console.log(Person1.name); // Undefined

The problem is than Symbols are exposed with methods like Object.getOwnPropertySymbols(),

let symbols = Object.getOwnPropertySymbols(Person1);

console.log(Person1[symbols[0]]); // John

But the most simple option is,

new WeakMap( [iterable] );

This object have one argument (iterable)

iterable -> Optional. Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair will be added to the new WeakMap. null is treated as undefined.

So let´s create our WeakMap,

class Person {  
   constructor(name) {  
     let weakmap = new WeakMap();  
     weakmap.set(this, { name: name });  
   }  
}

let Person1 = new Person("John");

console.log(Person1); // Person {}  
console.log(Person1.name); // Undefined

The main differences to the Map object are

WeakMap are collections of objects only.
If an element object has no other reference left, it will be auto released to the garbage collector.
For the previous reason you can´t iterate over objects inside of WeakMap.
For the previous reason you can´t know the size of the objects inside of WeakMap.
You can only use .set(), get(), .has() and .delete() methods with WeakMap.

WeakMaps can be particularly useful constructs when mapping keys to information about the key that is valuable only if the key has not been garbage collected.

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.

Thank you very much and keep coding!!!

By Yoel Macia

WeakSets in Javascript

Yoel Macia — Wed, 11 Dec 2019 08:18:31 +0000

WeakSets in Javascript

The weakSet object lets you store weakly held objects in a collection.

Let’s talk about the fact that we have a array of objects with emails.

let emails = [{  
 from: "Galician Developer",  
 to: "admin@example.com",  
 text: "Posting daily javascript articles"  
},  
{  
 from: "Addy Osmani",  
 to: "admin@example2.com",  
 text: "Google Chrome doesnt work!"  
},  
{  
 from: "Umar Hansa",  
 to: "admin@example3.com",  
 text: "Shazam!!! Let work, we have no time"  
}];

We want to add them to a read folder when we read them. If we delete an email we also want to delete it from the read folder.

How we can do it?

One solution would be, for example, to save the first element in other array and when we delete the first email also delete the first email read from this array.

let markAsReadFolder [];
markAsReadFolder.push(emails[0]); // Read the first email object

console.log(markAsReadFolder);   
// Output  
{  
from: "Galician Developer",  
to: "admin@example.com",  
text: "Posting daily javascript articles"  
}
emails.shift(); // Delete first object from emails  
markAsReadFolder.shift(); // Delete first object from read folder

console.log(markAsReadFolder);   
// Output  
[]

Other solution would be find the index of the first element than we are going to delete and then use splice().

let markAsReadFolder = [];
markAsReadFolder.push(emails[0]); // Read the first email object

console.log(markAsReadFolder);  
// Output  
{  
 from: "Galician Developer",  
 to: "admin@example.com",  
 text: "Posting daily javascript articles"  
}

let indexEmails = emails.indexOf(0);  
emails.splice(indexEmails, 1); // Delete first object from emails
let indexRF = markAsReadFolder.indexOf(0);  
markAsReadFolder.splice(indexRF, 1); // Delete first object from folder

console.log(markAsReadFolder);  
// Output  
[]

But the most simple option is,

new WeakSet( [iterable] );

This object have one argument (iterable)

iterable -> Optional. If an iterable object is passed, all of its elements will be added to the new WeakSet. null is treated as undefined.

So let´s create our WeakSet,

let markAsReadFolder = new WeakSet();
markAsReadFolder.add(emails[0]); // Read the first email object

console.log("Have we read the first email? " + markAsReadFolder.has(emails[0])); // true

emails.shift(); // Delete first object from emails

console.log("Have we read the first email? " + markAsReadFolder.has(emails[0])); // false

As we can see when you delete the object in question from the array of emails is also deleted from our WeakSet.

The main differences to the Set object are:

WeakSets are collections of objects only.
If an element object has no other reference left, it will be auto released to the garbage collector.
For the previous reason you can´t iterate over objects inside of WeakSet.
For the previous reason you can´t know the size of the objects inside of WeakSet.
You can only use .add(), .has() and .delete() methods with WeakSet.

Aren’t you sure about the garbage collector?

I’m going to share with you a small project in which you can see the differences in the garbage collector between the Set and the WeakSet.

Codepen Set vs WeakSet

You can find links to my other articles on Medium here.

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.

Thank you very much and keep coding!!!

Yoel

DEV Community: Yoel Macia

WeakMaps in Javascript

new WeakMap( [iterable] );

The main differences to the Map object are

WeakSets in Javascript

WeakSets in Javascript

new WeakSet( [iterable] );

The main differences to the Set object are:

Aren’t you sure about the garbage collector?

Codepen Set vs WeakSet

You can find links to my other articles on Medium here.