Does Garbage collection removes variables from construct in JS?

Question

For this example:

export class DummyClass{  
  constructor(container) {
    const wrapper: HTMLElement = document.createElement("div");
    wrapper.innerHTML = 'x';

    container.append(wrapper);
  }
}

new DummyClass(document.querySelector('body'));

After creating a new instance of DummyClass, is the "wrapper" variable deleted and the memory freed?

Yes, if you aren't caching the object reference, it's released. — Scott Marcus, Jul 06 '20 at 14:55
The exact timing of the removal of the object from memory is implementation-dependent. It will be marked for removal. — Heretic Monkey, Jul 06 '20 at 15:02
Yes, I've already indicated this. Objects that have a "code path" to them stay in memory (which is why we have closures), and objects that can't be reached by code are eligible for GC (when that happens is up to the client). — Scott Marcus, Jul 06 '20 at 15:06

score 1 · Answer 1 · answered Jul 06 '20 at 14:58

Yes, it happens because of how JS works:

When a function returns/end its computation, its memory block is removed from the callstack.

A small example:

 var a;
 function myF(){
    // do stuff
 }();

Before the function call, the call stack will look like this:

-------
|  A  |
-------

Then when function is called:

-------
| myF |
-------
|  A  |
-------

And when the function execution is over:

-------
|  A  |
-------

No trace of any local variable is left in the callstack.

You can find more info in this article

score 1 · Answer 2 · answered Jul 06 '20 at 15:04

const wrapper: HTMLElement = document.createElement("div");

The <div> created by this will continue to be in memory for as long there's some way to reach it from the root of memory. Once the constructor finishes running, the wrapper variable gets cleaned up, so that's one less way the div could be referenced.

However, that's not the only thing that's referencing the div. You've appended the div to the body element, so the body is now going to have a reference to it as one of its children. While that situation continues, the div cannot be garbage collected (and you wouldn't want it to, since it's visible to the user).

Does Garbage collection removes variables from construct in JS?

2 Answers2