WeakSets in Javascript
Tags: javascript, weaksets
Published: 2019-12-11 08:18:31


# 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://codepen.io/GalicianDeveloper/pen/dyPMRYb)
----------

## You can find links to my other articles on Medium  [here](https://medium.com/@galiciandeveloper).


_I often share more code tips on my_ [**_Instagram_**](https://www.instagram.com/galiciandeveloper/)  _you can say hello to me on my_ [**_Twitter_**](https://twitter.com/galiciandevelop)  _or see how i code in_  my  [**_Github_**](https://github.com/yoelmacia)**_._**

Thank you very much and keep coding!!!

Yoel