JavaScript WeakMaps / WeakSets: What consequences have "weak" references?

0
votes

In trying to understand JavaScript's WeakMaps / WeakSets I have read the MDN-documentation.

There is written: "The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected.".

Full article: MDN

What does that "they can be garbage collected"?

When I create an object. Then store it an WeakSet. Then set the reference variable null.

Would the object become deleted from the set automatically?

2
javascript

2 Answers

5
votes

I'm not really sure the above is showing you what a WeakSet is doing..

So I've created a snippet here to show it. Because from the browser you generally don't have access to the GC, I have made it so that it console logs the WeakSet, and waits for you to press a button and console logs again. In the mean time you can then clear the browsers console and force a GC, clearing the console is done as in Chrome console logging the WeakSet will also end up keeping a reference to the objects.

If you do this say in Chrome browser, you should see WeakSet {{..}, {{..}}, showing us that the WeakSet has a reference to 2 objects. After clearing the console, forcing a GC, and clicking the button,. another WeakSet will be console logged, it should show WeakSet {{..}}. basically showing 1 object, proving the GC has done it's job and is keeping a reference to objectA only.

Note: In chrome to force a GC, go to the performance tab, and there is an icon that looks like a dustbin 🗑️, click this.

ps. If you change the new WeakSet to new Set in the snippet, and do the same thing, you will notice you will still have 2 items in the Set. This is the difference between a Set and a WeakSet.

const ws = new WeakSet();

let objectA = {};
let objectB = {};

ws.add(objectA);
ws.add(objectB);

console.log(ws);

objectB = null;

document.querySelector("button").onclick = function () {
  console.log(ws);
}
<p>Look inside Chrome console, you should see a WeakSet, and it should have two values in there. eg. <b>WeakSet {{..}},{..}}</b></p>
<p>Now clear the console, otherwise the console will keep a referece to the weakset entries, and either wait for a while, maybe 30 seconds, or go into chrome's Performace tab and click the collect garbage icon.  After doing this, click the button below.</p>
<p>

<button>Click me after console clear and GC</button>

<p>After clicking the above button look in your console again, you should see a Weakset again, but with just one item. eg.  <b>WeakSet {{..}}</b></p>
3
votes

It means the garbage collector will remove the object from memory if it's referenced ONLY by WeakSet or WeakMap.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

var obj = {};
var array = new Array();
while(true) // don't do this
{
  array.add(obj);
  obj = null;
}

vs 

var obj = {};
var ws = new WeakSet();
while(true) // don't do this
{
  ws.add(obj);
  obj = null;
}

In the second example memory allocated by obj gets cleared, while in the second one it doesn't.