Closures: A concept of callback function – Functional programming in Javascript Part 4
Closures in Javascript are perceived to be fairly complicated and advanced, this discourages people to learn Javscript. I will try to make it simple. To be frank closures are now used in many languages, people use it in day-to-day coding, whether they know it or not. Because of this feature Javascript has an edge over other programming languages.
var a=10;
function outer(){
var b=20;
var inner=function(){
console.log(a);
console.log(b);
};
inner();
}
outer();
Here we are calling outer function, inside outer function we have defined inner function and we are executing it. Well any guesses for output! fairly straightforward its 10 & 20.
Inner function is declared and executed inside the outer function. Lets look at the tricky part, is it required for a function to be executed in the same place where it is declared? Not to be shocked (JAVA people), but the answer is NO. So, in Javascript it’s not necessary for a function to be executed in the same place where it is declared, you can execute inner function outside function.
Crux behind this functionality is the concept of first-class functions in Javascript. You can take the function object and pass it around and execute it somewhere else. Function can be executed in a fairly different context and in different scope from where it is declared. Let’s achieve our goal of executing the inner function outside the scope of outer function, even if it remains declared inside outer function.
var a=10;
function outer(){
var b=20;
var inner=function(){
console.log(a);
console.log(b);
};
return inner;
}
var innerFn=outer();
innerFn();
Here outer function will be returning a reference of function(or say function object) & we will execute it to execute that function. Can you guess the output? Well it’s again 10 and 20.
innerFn() touches only inner function and no part of outer function. we know variable a is global, so no problem 10 should be printed. But magic is variable b which is of the scope of outer function. If we were to be executed inner function from inside of outer function then it’s easy to get hold of variable b. Outer function got executed and closed, so even after that we easily executed and accessed b variable which happens to be of outer function scope. It is because of the concept of Closures in Javascript.
Closures– A function which remembers its scope even if the function is executed in a different scope from where it is declared. When Javascript creates scope chain, & when it encounters function, no matter whether function declaration or function expression, whenever function object is created (during compilation for function declaration, and during interpretation for function expression), it also remembers the scope chain. So, in our example what gets assigned to inner variable is function object that not only contains the function itself but also contains the scope information. Function object remembers about everything it had during the declaration time (when the function object got created). So, in our case when the function object got created, variable a and b which is relevant to our function, its scope chain is remembered or you can say pointers to the variables are saved. Now yoy can use this function object anywhere outside your context or you give it to third party library, it doesn’t matter. Function has the snapshot of its dependencies, it knows where each variable is that it needs. This is Closure. This concept is mainly used in callback handlers.
Best example where closures are implemented is setTimeout() function. It takes 2 arguments, a reference to function object and number of milliseconds after which the function is executed. Note that, function will only be executed after waiting for mentioned milliseconds and only if the current call stack has been executed.
var a=10;
var fn=function print(){
console.log(a);
};
setTimeout(fn,1000);
JQuery also uses the closure concept quite efficiently.