If you’re coming from an imperative programming background, closures in JavaScript can be pretty hard to grok. Here is yet another attempt to explain them. It assumes you are familiar with how lexically scoped, imperative languages like C, C++, and Java work.
In JavaScript every function call creates its own lexically scoped context. Normally that context is destroyed at the end of the function call. However, you can keep that context alive by creating a closure.
The function inner below creates a closure. Because there exists a reference to the inner function from the calling code after the function returns, neither the inner function nor its context are destroyed. In other words, inner‘s context (including vars local to countFrom) lives on after the call to countFrom returns.
function countFrom(num) {
var counter = num;
var inner = function() {
// return the value of counter before increment.
return counter++;
}
// return a reference to the inner function.
return inner;
}
var countFromOne = countFrom(1);
/* countFromOne now refers to inner()
with a unique, persistent context. */
window.alert( countFromOne() ); // alerts 1
window.alert( countFromOne() ); // alerts 2
window.alert( countFromOne() ); // alerts 3
var countFrom42 = countFrom(42);
/* countFrom42 refers to inner()
with different, persistent context. */
window.alert( countFrom42() ); // alerts 42
window.alert( countFrom42() ); // alerts 43
window.alert( countFrom42() ); // alerts 44
/* The context associated with the inner from
countFromOne is not affected by the above. */
window.alert( countFromOne() ); // alerts 4
Once you get the basic concept, you should be able to follow other examples that show how they can be useful.
P.S. Neckbeards think not naming things is cool, so here’s an anonymousy version of the function above.
var countFrom = function(num) {
var counter = num;
return function() {
return counter++;
};
};
