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...?

bobince · Accepted Answer · 2010-04-20 18:43:27Z

6

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.

answered Apr 20, 2010 at 18:43

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user227353 Over a year ago

This answer is very useful, I hope I could accept more than one answer.

T.J. Crowder · Accepted Answer · 2010-04-20 18:56:07Z

4

What you're seeing is the effect of a closure. The function being defined within the other function gets access to all of the variables and such in scope where it is — even after the outer function returns. More here, but basically, the variables (and arguments) in the function all exist as properties on an object (called the "variable object") related to that function call. Because the function you've bound to this.add is defined within that context, it has an enduring reference to that object, preventing the object from being garbage-collected, which means that that function can continue to access those properties (e.g., the variables and arguments to the function).

You normally hear people saying that the function closes over the x variable, but it's more complex (and interesting) than that. It's the access to the variable object that endures. This has implications. For instance:

function foo() {
    var bigarray;
    var x;

    bigarray = /* create a massive array consuming memory */;
    document.getElementById('foo').addEventListener('click', function() {
        ++x;
        alert(x);
    });
}

At first glance, we see that the click handler only ever uses x. So it only has a reference to x, right?

Wrong, the reference is to the variable object, which contains x and bigarray. So bigarray's contents will stick around as well, even though the function doesn't use them. This isn't a problem (and it's frequently useful), but it emphasizes the underlying mechanism. (And if you really don't need bigarray's contents within the click handler, you might want to do bigarray = undefined; before returning from foo just so the contents are released.)

edited Apr 20, 2010 at 18:56

answered Apr 20, 2010 at 18:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

5 Comments

user227353 Over a year ago

Well explained both here and in your post linked. I think this information is very important to know when creating objects in JavaScript. Thanks.

user227353 Over a year ago

Is a()'s 'variable object' same as a()'s scope? Is variable object just another name for scope?

T.J. Crowder Over a year ago

@user227353: Thanks, glad that helped. No, the variable object and scope are slightly different things. a()'s variable object sits at the top of its scope chain, and so it's the first thing that unqualified references are resolved against. But if something isn't resolved by a()'s variable object, the resolution looks to the next object on the chain, etc., etc. (There's also the with construct to avoid^H^H^H^H^H deal with.)

user227353 Over a year ago

Since functions in javascript are also considered as a 'variable', it make me wonder what else, other than variable object, is inside a scope?

T.J. Crowder Over a year ago

@user227353: Mostly I was just pointing out that the properties on a()'s variable object aren't all that's in scope for it; the properties on the variable objects of all of its enclosing scopes are in scope for it as well. That's pretty much all you need to worry about from the point of view of using Javascript. But for all the gory details of lexical environment records, binding objects, etc., check out section 10 of the spec. :-)

Collectives™ on Stack Overflow

how does memory stacks work in javascript

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related