JavaScript Closures: Demystified
Tags: javascript, webdev, programming, codenewbie
Published: 2023-12-23 00:13:53


In the smoky, dimly lit room of JavaScript, a concept lurks in the shadows, waiting to be unveiled. We call it a "**closure.**" Now, hang on to your hats because we're about to embark on a journey into the heart of this enigmatic creature.

When functions can be treated as values and local bindings are recreated upon each function call, an intriguing question arises: When the function call is no longer active, what happens to the local bindings?

For example;


 

```javascript
    function rememberValue(n) {
      let local = n;
      return () => local;
    }
    
    let wrap1 = rememberValue(1);
    let wrap2 = rememberValue(2);
    
    console.log(wrap1());
    // → 1
    console.log(wrap2());
    // → 2
```

The code snippet above is permitted and works as expected - both instances of the binding remain accessible. This scenario effectively illustrates that local bindings are created afresh for each function call, and different calls do not interfere with each other's local bindings.

## What are local bindings?

Let's start by defining bindings. In JavaScript, the term 'binding' is the formal language used to describe what many individuals commonly call a *variable.*


  

```javascript
    let totalHoursSpentOnArticle = 42;
    const name = "Ford Arthur";

```
Bindings defined outside of any function or block have a scope that encompasses the entire program. As a result, you can reference such bindings from any part of your code. These bindings are commonly referred to as *"****global****"* bindings.

Bindings declared using `let` and `const` are, in fact, local to the block where they are declared.

Therefore, if you create one of these bindings within a loop, the code segments located before and after the loop lack access to it. In the JavaScript version before 2015, scopes were only introduced by functions. Consequently, old-style bindings, created with the `var` keyword, remained accessible throughout the function in which they were defined or at the global scope if not within a function.

Bindings generated for function parameters or declared within a function have a scope limited to that specific function, earning them the name of ***local bindings***. Upon each function call, fresh instances of these bindings are generated. This separation between functions offers a degree of isolation, where each function call operates within its unique context (local environment), often requiring minimal awareness of the broader global environment.


    

```javascript
    let x = 10;
    
    if (true) {
      let y = 20;
      var z = 30;
      console.log(x + y + z);
      // → 60
    }
    
    console.log(x + y)
    // → Uncaught ReferenceError: y is not defined
    // y is not visible here
    
    console.log(x + z);
    // → 40

```
In the code snippet above, `y` and `z` are the local bindings, while `x` is a global binding.

Every scope can *"look into"* surrounding the scope, making `x` visible inside the block within the provided example. However, an exception arises when multiple bindings share the same name  -  under such circumstances, the code can exclusively access the innermost binding with that name. For instance, when the code within the `square` function references `n`, it specifically refers to its `n`, not the `n` in the global scope.


  

```javascript
    const square = function(n) {
      return n ** 2;
    };
    
    let n = 42;
    console.log(square(2));
    // → 4
    console.log(n);
    // → 42
```

This behavior, wherein a variable's scope is dictated by its position within the source code hierarchy, serves as an instance of ***lexical scoping*****.** Lexical scoping enables inner functions, like `square` in this case, to access variables from their enclosing scopes based on their respective positions within the code's structure.

## Now, let's direct our gaze to the central element: Closures

**What is a closure?**

A closure combines a function enveloped with references to its surrounding context (the lexical environment). A lexical environment in programming refers to the environment in which code is written and executed.
You might want to find out more about [lexical environments here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

To put it differently, closure provides the means to reach the scope of an outer function from within an inner function.
 
To use a closure, create a function within another function and make it accessible. You can render a function accessible by returning it or passing it to another function.
Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope.
Note the first part of the definition; *"****A closure is the combination of a function enveloped with references to its surrounding context******.****"* That's essentially a description of lexical scope!
But we require including the second part of this definition to give an example of a closure. *"****Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope****."*

Let us examine fascinating instances of closures:


  

```javascript
    function theAnswer() {
      var say = () => console.log(answer); 
      // Local variable that ends up within the closure 
      var answer = "'Forty-two,' said Deep Thought";
      return say;
    }
    var tellUs = theAnswer(); 
    tellUs(); // ''Forty-two,' said Deep Thought'
```

Here, we have two functions:


- An outer function `theAnswer` has a variable `answer` and returns the inner function `say`.
- An inner function that returns the variable `answer` when `tellUs` is invoke.
![Image man with red beams coming out of his head.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjd4fsocwwbzhstprssk.png)


Duplicate the provided code example above and give it a go. What do you think?

In the code example above:

- `theAnswer` is called and creates an environment in which it defines a local variable answer and returns an inner function say.
- Next, we call the `theAnswer` function and save the resulting inner function in the variable `tellUs`. Logging the variable `tellUs` returns something like what we have below:

```javascript

    ƒ theAnswer() {
      var say = () => console.log(answer); 
      // Local variable that ends up within the closure 
      var answer = "'Forty-two,' said Deep Thought";
      return say;
    }
```


- So that when we later call `tellUs`, it proceeds to run the inner function say, which subsequently logs the value of `answer` to the console, as shown below:


    'Forty-two,' said Deep Thought

Getting your head around programs like these requires a bit of mental gymnastics. Picture function values as these packages carry both their inner workings and the surroundings they grew up in. When you evoke them, they bring that homey environment they were born in - no matter where you make the call from.

## Use cases of closures

**Data Privacy**
Closures can be used to create private variables and functions. This ensures that certain data is inaccessible outside the scope, providing privacy and encapsulation.
Here's an illustration:


    

```javascript
      function createCounter() {
      let count = 0; // Private variable enclosed by the closure
    
      return function() {
        count++;
        return count;
      };
    }
    
    const incrementCounter = createCounter();
    console.log(incrementCounter()); // Output: 1
    console.log(incrementCounter()); // Output: 2

```
Allow me to offer a concise breakdown of its operation:


- `createCounter` is a function that initializes by establishing a private variable named count with an initial value of 0 within its scope.


- It returns an enclosed function, a closure, which, when called, increases the `count` by 1 and returns the current value.


- `incrementCounter` is assigned the result of invoking `createCounter`, which means it holds the inner function (closure) that was returned.


- When `incrementCounter()` is called, it triggers the execution of the inner function, increasing the `count` and the return of the updated value.


- With every further use of `incrementCounter()`, `count` increments.

**Callback functions**
Closures are often used in dealing with asynchronous tasks and event-driven programming. They help create callback functions that remember and work with their surrounding environment, which is crucial when explaining event-based systems in documentation.
Here's a code example demonstrating closures in callback functions:


    

```javascript
    function fetchData(url, callback) {
      setTimeout(function() {
        const data = `Data from ${url}`;
        callback(data); // Closure captures 'data'
      }, 1000); // Simulate a 1-second delay
    }
    
    function processData(data) {
      console.log(`Processing: ${data}`);
    }
    
    fetchData('https://example.com/api/data', processData);

```

- In our scenario, the `fetchData` function simulates an asynchronous data retrieval process. It accepts both a URL and a callback function as its parameters.


- Inside the `setTimeout`, it generates some data and invokes the callback function, which captures the data variable from its surrounding scope due to closure.


- The `processData` function serves as our callback, responsible for handling and logging the data we receive.


- We call `fetchData` with a URL and the `processData` callback, demonstrating how closures empower the callback to reach and employ the `data` variable from its surrounding scope.

Closures are a fundamental component of functional programming and may be found everywhere in JavaScript and other languages (not only functional ones).
More use cases are;

- **Memoization**
- **Partial Applications**
- **C****urrying**

You can check out more here on [wikipedia](https://en.wikipedia.org/wiki/Closure_(computer_programming)#Applications)

## Clos(ure)ing remarks or thoughts? 

So, there you have it - the tale of JavaScript closures. They may seem cryptic initially, but once you've grasped their essence, you'll find they're a powerful tool in your programming arsenal. Use them wisely, and you'll unlock new realms of possibility in your technical journey. Happy coding, my friends.

![alt arnold gif](https://media.giphy.com/media/Rd7pEbE7rjZz8vySuU/giphy.gif)


:

## Okay real quick

What would this return?

```javascript

    for(var i = 0; i < 3; i++) {
      const log = () => {
        console.log(i);
      }
    
      setTimeout(log, 10);
    }
```


## Resources
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) has a fantastic page on closures, as you might imagine, and
-  The [Wikipedia](https://en.wikipedia.org/wiki/Closure_(computer_programming)#Applications) article on closure delves deeper into closure applications and how they work in various programming languages.
- You know what's fantastic? There's a treasure trove of valuable information waiting for you online! If you type "closures" into your Google search bar, you'll uncover an abundance of thrilling and fantastic insights on the topic. It's truly amazing and fascinating to dive into!