JavaScript Closures

What are closures in JavaScript?

Taken from http://jibbering.com/faq/notes/closures/:

The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodes of other functions. And that those inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.

For Example:

var x;
function foo()
{
    var i = 2;
    function bar() {
        i++;
        return i;
    }
    console.log(i); //Prints 2
    bar();
    console.log(i); //Prints 3
    x = bar;
}
foo(); //Prints 2 and 3
x(); //Now i == 4
console.log(x()); //Prints 5
foo(); //Prints 2 and 3 again



Note that bar() is an inner function that has access to foo()'s local variables.  But, the most interesting part is that after foo() returns, we can still access i by calling x().

Closures inside a for loop:
Suppose you have an list in a XHTML document.  You might want to setup an event handler that does something when you click on an item.  I'll use jQuery syntax if you don't mind.

You might be tempted to write:
var listItems = $("#list li");
for(var i = 0; i < listItems.length; i++)
    listItems.eq(i).click(function() {
        alert(i);
    });

The desired behavior is that clicking first list item would display 0, clicking the second list item would display 1, and so forth.  What actually happens, is that they all display whatever listItems.length is because that is the last known value for variable i.  Closures worked in this case, but not as desired.

Fortunately, fixing this little problem is much more trivial than one might think.  Simply create another scope level!!!  Check this out...

var listItems = $("#list li");

for(var i = 0; i < listItems.length; i++)

    listItems.eq(i).click(function(i2) {
        return function() {

            alert(i2);

        };

    }(i));

In this case, I am passing the value of i into a new inner function (gray) that returns the former function in the previous example (red).  i2 is now in a new scope level and gets a new memory location for each iteration of the for loop.  For clarity, I have changed the variable name to i2 in the inner function, but you could also call it i.  Problem solved.

This is EXTREMELY useful in Node.JS since there are almost no synchronous, blocking function calls; rather, any I/O request or other "blocking" request is made using a callback function.

Enjoy!

Lots more info:
http://jibbering.com/faq/notes/closures/
http://www.mennovanslooten.nl/blog/post/62
http://nodejs.org/