Back to Basics - JavaScript Closures
Tags: beginners, javascript, womenwhocode
Published: 2019-08-12 15:33:16

---
title: Back to Basics - JavaScript Closures
published: true
description: fundamentals of closures
tags: #beginners #javascript #womenwhocode
---


It's time for part 2 of my JavaScript Basics series! This week we are reviewing closures. I think it is very likely that many beginner programmers understand this concept, but might not recognize that we call this functionality a closure. Let's dig into the definition of a closure and explore some examples.


[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) defines a closure as <em>"the combination of a function and the lexical environment within which that function was declared."</em> Great..but can we simplify even more into layman's terms? 

Think of a closure as a function with preserved data. The preserved data consists of any variables or arguments that were in scope at the time of function call. Each and every function call creates its own preserved data which we call a <em>local binding</em>. The idea that we can access a particular instance of a local binding is closure. 

Let's look at some examples:

The code below shows an outer and inner function. The outer function takes in a number, assigns it to a local variable (<em>local</em>) and returns our inner function. The inner function computes and returns the value of the local variable multiplied by two. 

![simple outer/inner function example of closure](https://thepracticaldev.s3.amazonaws.com/i/0ki45w1sbuaplza350ew.png)<figcaption>demonstrates multiple local bindings (closures)</figcaption>

As mentioned earlier, each time a function is called a new local binding is created. Therefore a single function can have various local bindings as illustrated in the code above. We have a closure which accesses the binding of `num = 2` and a closure which accesses the binding of `num = 4`. We also get the ability to call `var1()` and `var2()` anywhere in our program and they'll maintain their local bindings. 

The next example is a tad more complex. It considers both an outer and inner function, but this time the inner function takes in an argument. The objective of this code is to build a DRY function that creates a blueprint for multiplication. We can bind this function to a factor (ex: 5) and then reuse over and over again passing in different numbers. 


![more complex outer/inner function example of closure](https://thepracticaldev.s3.amazonaws.com/i/tfdd69fqfmjw6168jwpn.png)<figcaption>functions see the bindings in which it was created, not called</figcaption>

Above we are creating two separate environments on lines 7 and 10. `triple` constructs an environment where `factor = 3` and `quadruple` does the same where `factor = 4`. Now looking at line 13, the function which is returned by calling `triple(5)` recalls that `factor = 3` and recognizes that the argument of `5` represents `num`. So, the result of `num * factor` is returned.

I hope this article helped to provide some more explanation around what a closure is. Feel free to comment below with feedback, examples of when you've used closure, or any additional tips! 


![closure gif from friends](https://media.giphy.com/media/eMsCxr6w35vjfI4zl5/giphy.gif)