Javascript closures - variables vs parameters

Question

I'm trying to learn Javascript closures. I'm having trouble getting my head around the fact that when you create several closures in a loop, all closures save only the last state of a variable. With this example

var links = document.getElementsByTagName('a');

for (var x=0; x<links.length; x++) attachListener();

function attachListener() {
        links[x].addEventListener('click', function(){
            console.log(x);
        }, false);
};

When I have three links in my document, clicking on any link shows "3", I guess because x got incremented to 3 after the final run of the loop. I read in this excellent intro that if you run the outer function multiple times a new closure's created each time. So how come each closure doesn't save a different value for x each time I call the outer function?

When you pass x as a parameter to the outer function it does work as expected.

var links = document.getElementsByTagName('a');

for (x=0; x<links.length; x++) attachListener(x);

function attachListener(z) {
        links[z].addEventListener('click', function(){
            console.log(z);
        }, false);
};

Now you get 0 when you click the first link, 1 on the second etc.

Can anyone please explain why there is this difference?

Cheers

Answer 1

Closures do not capture the value of a variable at the time of their creation but the variable itself. A variable closed over by multiple closures is shared. This is intentional, and it is a good way of doing encapsulation in JavaScript, e.g. like this:

var makeMutablePoint = function(x, y) {
  return {
    position: function() {
      return [x, y];
    },
    add: function(dx, dy) {
      x = x + dx;
      y = y + dy;
    }
  };
};

This is also the way closures work in most other languages (which is the primary reason Python is sometimes said not to have proper closures).

There is one aspect to this that is JavaScript-specific, though, which may trip you up at times (and actually seems to have done so in this case): Variables always have function scope in JavaScript. For example, in your first code snippet, there is only a single x variable, whereas one might expect the scope of x to be restricted to the loop body (with a new x for each iteration). This is a quirk in the language which is probably going to be improved upon in the future by the introduction of a let keyword with more fine-grained scoping rules.