DEV Community

Yoel Macia
Yoel Macia

Posted on • Originally published at Medium

WeakSets in Javascript

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

Top comments (0)