Using closures will be a piece of (chocolate) cake From the words of , Kyle Simpson “Closure is all around you in JavaScript, you just have to recognize and embrace it.” When you write in , closures just happen… wether you are aware of it or not. Understanding closures to intentionally create them and leverage their power is a challenge that every JavaScript developer has to tackle; let’s give it a try with this article. JavaScript Here’s a somewhat academic definition that will help you understand and spot a closure when you see one : closure is when a function is able to remember and access the variables of the outer (enclosing) function even when that function is executing outside its scope. Closure is when a function is able to remember and access the variables of the outer (enclosing) function even when that function is executing outside its scope. We will go back to the concept a little later. Just know for the moment that, depending on the position of a variable in the code, some functions will have access to it and some will not. scope Now about the ; as you already may know, a variable has two components : a name and a value. The name “variable” makes it very clear : its value can from one moment to the next. But sometimes, we need to keep the value as it was at a certain point in time to use it later. variables vary In JavaScript, this situation is frequently encountered when working with functions like and for example. setTimeout() setInterval() The loop example for Let’s take the example of a loop used to display a counter, and a function used to delay the execution of a function. for setTimout() Looking at this code snippet, you would normally assume that it would print the numbers 0 to 9, one per second. In fact if you run this code, you get 10 printed out ten times, at a one-second interval : Why is that happening ? When the for loop runs and gets called sometime in the future (in that case, one second later in the future), the value of the variable has already been incremented to the end of its range by the for loop. setTimeout() i This is a case where , before it is modified again. At each iteration loop, we need to “capture” the corresponding copy of and store it for later use. The good news is that closures are going to help us do just this : . we need to store and access the value of a variable at a given time i create a new closured scope at each iteration of the loop We will get back to this example and see how to add a closure to our loop. But before diving deeper inside the workings of closures, let’s take a brief detour and review some important concepts we need to understand well to get a full grasp of closures. A function is also a variable A function is a special variable : you can reassign a value to it and pass it to another function as parameters (this is useful in writing asynchronous functions which are passed as callbacks arguments). The scope of a variable Variables that are defined outside of a function can be accessed by that function. They can be modified outside of that function as well as by the function itself. Variables that are defined inside of a function, as well as the arguments passed to a function, are only accessible inside the function. (To learn more about the scope, please refer to this article ) Passing a variable to a function When a variable is passed as an argument to a function, the of the variable is copied inside the argument. value Taking closures by storm Now that we finished our detour and got back, we are ready to tackle closures. Let’s consider the following code : Let’s dive a little deeper into this function : what’s going on here ? We define an argument that will take the value of the variable passed to the function. number1 We define a . In this nested function, the variable is accessible because it has been defined outside of the function, in its parent function . function inside the function myFunction number1 add myFunction We return the function, but we are not it. What does this mean ? add calling The function : the function. When I print to the console, it will display the return result of the function, which is (the function) : myFunction returns a function add myFunction another function add Why is this important ? Because it means that I can assign a value to , pass it to , and this new value of will be stored for later use, when I will be ready to finish the job and call the add function. number1 myFunction number1 And here is the awesome thing about closures : . Using closures is like adding a “pause” button inside your function. You can go back to it later, when there has been a change in your app (a click event from the user for example), and still be able to retrieve the value of your data before this change in the application happened. you can write functions with an intermediate state that can capture data from your application, at a very specific moment in time, and you can then use this data at another, later moment in time Without closures, JavaScript would simply run all the code and return the last known value of your data, with no way to go back to the moment when the data had the value you now want to use. That’s what happened in our first loop example : the function kind of arrived late for the war. The battles of the loop had already been fought and when the cavalry arrived, the variable had long been assigned 10, the latest value in the loop, and stayed that way until arrived. for setTimeout for setTimeout i setTimeout Still not convinced or not sure when to use a closure ? Let’s take an example and explain how closures work by baking a cake. Bake a cake with a closure We are going to use this code that uses a function to bake cakes that have different ingredients and cooking temperatures : The function is , that can be called at any point in time after the function has been called. ovenTemperature() a closure, a function inside a function bakeCake() Notice how we have to take two steps to get the whole log in the console ? If your run this code and never call or , the console will only print : chocolateCake() carrotCake() "chocolate cake : add chocolate to the batter""carrot cake : add carrot to the batter" You wouldn’t get any error, but the function inside the function, the closure, would not run and the completion of baking the cake would not happen. Notice also that I can use my function to bake two very different cakes, each one being a separate instance of that will remember its own argument for later use. bakeCake() bakeCake() ingredient Like in a real recipe, it is not enough to just add the to the batter, you also have to set the right and baking to have a perfect cake. And for that, you have to call another function inside the function. As we saw in the earlier example with the function, if this inner function isn’t called, the return of the outer function is simply another function, waiting for its time to be called, not a result value (yet). ingredient temperature time add() Here, the function will not return the "ready to bake" line until you also call the function with the two arguments : it is on hold until called properly. bakeCake() ovenTemperature() You can put the chocolate in the batter, let the batter rest, and take all the time you need to check your recipe book for the right temperature and baking time. It can be an hour later, you may have to call your mother to get advice on it, and the batter with chocolate will still be here, waiting for you to give the final instructions. In other words, anytime you will call , the argument, chocolate, will still be incorporated. chocolateCake() ingredient So how do I call this inner function when I am ready ? I’ve called my mother, checked every recipe on the , now let’s finish off these cakes, once and for all. internet I have created two instances of the function and assigned them to two different variables : and . bakeCake() chocolateCake carrotCake Let’s concentrate on the chocolate cake. is a function, and an instance of , with a argument. For to return the "ready to bake" sentence, I just have to call it and pass the arguments needed by the function. chocolateCake bakeCake chocolate chocolateCake ovenTemperature() This means that will not be fulfilled until we pass a second set of arguments for the closure to be triggered. chocolateCake Here for simplicity of comprehension we first assigned to a variable ( ), and then passed the second arguments to this variable, which is also a function. But if we already knew all the requirements of the recipe, we could have gone directly : bakeCake("chocolate") chocolateCake bakeCake("chocolate")(250, 60); The ultimate take on this experiment, in the words of , is that: Douglas Crockford “An inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.” Back to the inside a loop example setTimeout() for Now with all we know from the example, how can we modify the code from our first example to add a closure and make the function print the numbers from 0 to 9 instead of printing the number 10 ten times? ( remember 10 is the last known value of : on the last iteration of the loop, the function logged 9 in the console, then incremented this number by 1. bakeCake() i Let’s have a look at this function in real time : Here is the code of our function : For comparison purposes, we added a simple for the counter at each iteration of the loop, and a function that is supposed to do the same, this time at 1 second intervals. console.log() i setTimeout() From the image above we can easily see that that the function does indeed print a result at one second intervals, but the increment of has already taken place and when begins to run, has an unchanged value of 10 at each delayed iteration of the loop. setTimeout() i setTimeout() i How are we getting out of this ? Let’s apply what we have learned from using closures so far, and write a function that will act as the outer function for , from which will be able to access the value of : timer() setTimeout() setTimeout() i And… it works ! Here we declared a function and wrapped the function inside of it. We then pass it the exact value of the counter at each iteration of the loop, hereby . timer() setTimeout() "closing" the value of **i** inside the function at each iteration We could also have written : where we declare an anonymous self-invoking function and pass it the argument at each iteration of the loop. i This will print the number 0 to 9 at one second intervals, thanks to the closure we created : . we captured the value of **i** at a given iteration of the loop, we it inside a function, passed the value to closed **setTimeout()** and then called the function A closing word Closures on the front-end can help us achieve a lot of things, like or . passing parameters on a click event from the user overcoming the google maps API results limit On your journey to becoming an intermediate or advanced JavaScript developer, you will come across closures and now be able to spot them, hopefully use them, and understand some bugs that wouldn’t make sense otherwise. Want to learn more ? Check out my other articles on the basics of JavaScript: Hoisting in JavaScript: a Quick Guide Understand JavaScript Variable Scope with ease Get your head around “this” Grasp “By Value” and “By Reference” in JavaScript A Quick Handbook for Dates in JavaScript Work with JavaScript arrays like a boss I hope you enjoyed this introduction to JavaScript closures. Feel free to comment and like this article so that others can find it easily on Medium !
