The ABCs of JavaScript : Closures

Hello and welcome to "The ABCs of JavaScript"! In today's lesson, we'll be delving into the fascinating topic of closures.

In JavaScript, Closures are an important and advanced feature in JavaScript that provide functions with access to variables scope and parameters of their outer function, even when the function is executed outside that outer function.

If you're unclear about closures defintion, don't worry, we'll break it down step by step.

First, let's clarify what an_ outer function and inner function_ means.
In JavaScript, functions can be defined inside other functions, like in the example below:

function outerFunction() {
  console.log("This is an outer function.");

  function innerFunction() {
    console.log("This is an inner function.");
  }

  innerFunction();
}

outerFunction();

In this example, the function that encloses the nested function is called outerFunction, and the nested function is called innerFunction very simple 😊😊.
You might ask why we need to declare functions like this instead of declaring them separately. While that is not our subject, let me give you some pointers to explain why this is useful in JavaScript 😇 😇:

1. Encapsulation: Defining a function inside another function allows you to encapsulate that function and its functionality within a specific scope.
2. Information Hiding: If you have a function that relies on some variables or other functions that are not relevant to the rest of your program.
3. Reusability
4. Performance

Let's return to our concept. As we saw earlier, the nested function is called the inner function. However an inner function can create a _closure _when it references variables from its outer scope! That's right, we've arrived at the heart of the matter.

function outerFunction() {
  let increment = 0;
  console.log("This is an outer function.");

  function innerFunction() {
    increment = increment + 1;
    console.log(increment);
    console.log("This is an inner function.");
  }

  innerFunction();
}

outerFunction()

If we execute this code, we will see the value 1 in our terminal because the inner function (or closure) has access to the variable of its outer function as we explained earlier in the definition.

But there's something even more powerful about closures 🚀 🚀 . Let's modify our code again:

function outerFunction() {
  let increment = 0;
  console.log("This is an outer function.");

  return function innerFunction() {
    increment = increment + 1;
    console.log(increment);
    console.log("This is an inner function.");
  }
}

let incrementMethod = outerFunction();
incrementMethod(); //1;
incrementMethod();//2;
incrementMethod();//3;

Did you see this beautiful magic 😍 😍? Even though the outer function has finished executing, the inner function still has access to the increment variable in its state. This demonstrates the power of closures - they can still access the variables of their outer function even after it has finished executing.

To remember this concept in JavaScript, here's a useful trick: always imagine that each function has a backpack. Before any execution of any function, the backpack is filled with all information preceding the declaration of the function. When the function is executed, it has its own backpack that it can access.

In our example, the inner function's backpack is filled with the "increment" variable, and it will always be in its backpack even if the outer function has finished execution.

I hope this article helped you to better understand the concept of closures. See you in another article!

Comments

[Jon Randy 🎖️]

All functions have an associated closure - regardless of whether they were defined inside another function.

[Ismail Labbi]

A closure is created when a function accesses and uses variables from its outer scope. If a function does not use any variables from an outer scope, it does not need to create a closure

[Jon Randy 🎖️]

Not correct. From MDN (emphasis mine):

In JavaScript, closures are created every time a function is created, at function creation time.