The Fear-Inspiring Closure of JavaScript

Getify in his series You-Dont-Know_Js, explains closure to be a way to "remember" and continue to access a function's scope (its variables) even once the function has finished running.

Usually, when you create a function; either you pass some parameters, or you declare some inner variables. Looking at the example below;

function multiplyBy(passed)
{
 var inner = 2;
 return passed * inner;
}
console.log(multiplyBy(3));

This is a very simple function that multiplies whatever you pass through it by 2 and returns the solution.
In Javascript you can get by not passing a parameter in your function. Now you might be wondering how our initial program would work, you could do this instead;

var passed = 3;
function multiplyBy()
{
var inner = 2;
return passed * inner;
}
console.log(multiplyBy());

In Javascript, variables defined outside a function are automatically made available inside the function because Javascript uses something called lexical scoping; using our example this means var inner is not accessible to the function multiplyBy, but how does it do it, the simple answer is closure, Towards the end of this post we would prove how the above is a closure.

Now lets look at a more popular example;

function addTo(passed)
{
function add(inner)
    {
        return passed + inner;
}
return add;
}

In the code above, we have a function that has within its scope another function. In Javascript these are called nested functions. The inner function returns a sum of the parameter of the first function and its own parameter; while the outer function returns the inner function.

Now when we call the outer function: addTo(3);, what happens; 3 is passed as an argument of the first function and in the second function we would have returned; 3 + inner;. Our program isn't yet solved and now this is where closure comes into play. Remember Getify's initial explanation of closure. Adding this block of code under our function;

```var addThree = addTo(3);
   addThree(4);```

Now when you run our program, what you have returned by the inner variable is 3+4, and this is where the definition of closure by Getify comes into play, javascript keeps or remebers the variables it needs to execute the program completely even when the outer function must have finished running.

Final Notes:

1. The key to understanding closure is understanding how function within functions work.
2. Closures get involved when the returned inner function isn't self-contained; i.e when it is dependent on the outer function for some variable or parameter to finish its execution.

N/B: A self-contained inner function doesn't depend on the outer function, here is an example of a self-contained inner function;

function youSayBye()
{
alert("Good bye");
function iSayHello()
    {
       alert("hello");
}
return iSayHello;
}

Lastly, the combination between the inner function and the variable the inner function relies on gives us a closure.

closure = function + outer context

• where the outer context here is the variable the function relies on.

Comments

[Alon Kaduri]

Nice and clear post.
I would consider fixing the indentation of the code examples to make it more readable.

[Johnson Ogwuru]

OK.. Would do that, thanks

[Oleohi Alli]

Short, simple and direct. Well done

[Johnson Ogwuru]

Thanks alot