Question

var foo = (function(){
  var x = 0;
  return function(){return x++;};
})()

Why the var x = 0 expression only runs once is my biggest misunderstanding about this.

Answer 1

Your code:

var foo = (function(){
  var x = 0;
  return function(){return x++;};
})()

is equivalent to this code:

function f(){
  var x = 0;
  return function(){return x++;};
}
var foo = f();

It’s easy to see, when you break it up like this, that the function f() is only called once. It defines x, and then returns a new function that is defined inside the local scope of f. This new function is often called an “anonymous function” (meaning that it has no name) or a “closure”. In truth, all functions in javascript are “closures” — whether or not they are named. The term “closure” simply means that the function retains access to the variables that were defined in the parent function’s scope — even after the parent function has exited.

So now, foo contains the new function (the closure) that was returned from f. You can call foo() as many times as you like — and each time you do, x will be returned and post-incremented. Since x exists in the closure’s parent scope, its value will persist across multiple calls to the closure.

What’s more… no other code now has access to x once f() has exited — this basically means that x is now the “private data” of the closure. Pretty neat huh?