The Fear-Inspiring Closure of JavaScript
Tags: javascript, learning, programming, tutorial
Published: 2018-04-28 08:43:37

---
title: The Fear-Inspiring Closure of JavaScript 
published: true
description: we would be looking at closures in JavaScript and see if we could conquer the fear of it.
tags: javascript,learning,programming,tutorial
---
[Getify](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md) 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](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md) 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](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20%26%20going/ch2.md) 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.