how does memory stacks work in javascript

Question

When we have code like:

function a(){
  var x =0;
  this.add=function(){
    alert(x++);
  }
}

   var test = new a();
   test.add(); // alert 0
   test.add(); // alert 1
   test.add(); // alert 2

How does this work? Doesn't that the value of 'x' in a() should be 'gone' as soon as test = new a() is complete? The stack contains x should also be gone as well, right? Or, does javascript always keep all the stacks ever created in case they will be referenced in future? But that wouldn't be nice, would it...?

Answer 1

The word you're looking for is “closure”.

Creating a function inside another function gives the inner function a (hidden) reference to the local scope in which the outer function was running.

As long as you keep a copy of your test, that has an explicit reference to the add function, and that function has an implicit reference to the scope created when calling the a constructor-function. That scope has an explicit reference to x, and any other local variables defined in the function. (That includes the this value and the constructor's arguments — though you can't access them from inside add as that function's own this/arguments are shadowing them.)

When you let go of test, the JavaScript interpreter can let go of x, because there's no way to get a reference back to that variable.