Can someone explain this JavaScript auto executing function?

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?

Answer 2

The variable foo is being assigned to the result of the self-executing function, which goes as follows:

Declares a variable named x initialized to 0. Returns a function that, when invoked, will increment the value of x.

So at this point, foo references a function.

The way you would invoke this is:

foo();

The first time this is invoked, the value returned will be 0, then 1, 2...

Well, wait a minute..., shouldn't it be 1, 2, 3...?

You are on the right track, but the reason why in this case this isn't true is because of the difference between pre-increment and post-increment. (++var vs var++). The difference is that the result of a pre-increment is the variable's value after increment, while the result of a post-increment is the variable's value before increment.

This example illustrates the concept of closures, which essentially means that inner functions have access to the variables defined in their surrounding functions.