JavaScript Closures: Demystified

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;

    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.

    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.

    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.

    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.

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:

    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.

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:

    ƒ 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:

      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:

    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
• Currying

You can check out more here on wikipedia

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.

:

Okay real quick

What would this return?

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

      setTimeout(log, 10);
    }

Resources

• MDN has a fantastic page on closures, as you might imagine, and
• The Wikipedia 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!

Comments

[Jon Randy 🎖️]

To use a closure, create a function within another function and make it accessible.

You don't actually need to nest functions to use closures.