Now can you see how good it’s going to be? | ||
| -- Devo, “Pink Jazz Trancers” | ||
Throughout this book, we have seen many jQuery methods that take functions as parameters. Our examples have thus created, called, and passed around functions time and again. While usually we can do this with only a cursory understanding of the inner JavaScript mechanics at work, at times side effects of our actions can seem strange if we do not have knowledge of the language features. In this appendix, we will study one of the more esoteric (yet prevalent) types of functions, called closures.
JavaScript is fortunate to number itself among the programming languages that support inner function declarations. Many traditional programming languages, such as C, collect all functions in a single top-level scope. Languages with inner functions, on the other hand, allow us to gather small utility functions where they are needed, avoiding namespace pollution.
An inner function is simply a function that is defined inside of another function. For example:
function outerFun() {
function innerFun() {
alert('hello');
}
}
The innerFun() is an inner function, contained within the scope of outerFun(). This means that a call to innerFun() is valid within outerFun(), but not outside of it. The following code results in a JavaScript error:
function outerFun() {
function innerFun() {
alert('hello');
}
}
innerFun();We can trigger the alert, though, by calling innerFun() from within outerFun():
function outerFun() {
function innerFun() {
alert('hello');
}
innerFun();
}
outerFun();This technique is especially handy for small, single-purpose functions. For example, algorithms that are recursive but have a non-recursive API wrapper are often best expressed with an inner function as a helper.