Closure In Javascript

Closure is one concept in Javascript that can be difficult to grasp at first; this is because Javascript closures are not applied explicitly- they are not created manually like arrays or objects are created. A closure simply happens automatically in certain situations. For you to fully grasp closure, you have to have a basic understanding of scope, scope chain, and lexical scoping, I have written an article on everything you need to know about Scoping in Javascript although I will talk briefly about it, and here is the link to the article .

Scope:

This is a space or environment in which a certain environment is declared. In Javascript, we have global scope, function scope, and block scope.

Lexical Scoping:

Lexical scope is also known as static scope. In simple words, lexical scoping simply means a function that is written inside another function has access to the variable of the parent’s functions. The way variables are organized and accessed is controlled by the placement of functions and blocks in the code.

Example:

const age =22;
const newFunction = function(value) {
age2 = 24;
const newAge =  age + age2;
const secondFunction = function (num) {
return Newage – age;
}

The variable age is in the global scope this is because it is defined outside a function and can be accessed anywhere. The variable secondFunction can access its parent’s variable and this is a simple definition of lexical scoping.

CLOSURE:

Closure is an English word and means “the act or process of closing something” and that is how I see it in Javascript. Let me explain with an example:

const secureBooking = function () {
  let passengerCount = 0;
  return function () {
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  };
};
const booker = secureBooking();
booker();

In secureBooking:

• passengerCount was declared to zero

• A function is returned that updates the passenger count variable whenever the secureBooking function is called. Notice that the secureBooking function has been declared to a variable, booker. This implies that the booker variable is also a function that is why it was called not the secureBooking variable.

  Explanation of the function:

  How is it possible that the new function still has access to the passsengerCount variable? This is because of closures, Sit tight and read more! When the Javascript engine comes across the secureBooking function, a new execution stack is created with all its variables. After executing this function, the execution stack is popped off the global execution stack which means the function is no longer active and exists. Note: A new execution stack is created for the booker function although it has no variables even if it has been given the value of secureBooking function, the execution stack is empty. If we say the function is no longer active; how come the booker variable still has access to the secureBooking function. This is because of closure. Closure makes a function remember all the variables that existed at the function’s birthplace. The closure is basically this variable environment attached to the function exactly at the time and place the function was created. Thanks to closure, a function does not lose connection with the variables present at the birthplace.

  Summary:

  Closure is easy once understood. A closure is like a backpack that a function carries around wherever it goes. This backpack has all the variables that were present in the environment where the function was created. Whenever a function cannot be found in the function scope, Javascript will look into the backpack and take the missing example from there. Finally, you do not have to create closures manually, Javascript does it automatically.