How Closure is Different from Lexical Scoping in Javascript.

In Javascript, there is often a blending of concepts of closure and lexical?scoping.

However, it’s important to note that closure and lexical scoping are two interconnected yet distinct concepts in JavaScript. Lexical scoping is actually a crucial component of closure, as we’ll delve into later.

Prerequisites to understand this topic.

• Concept of Functions in Javascript.
• Concept of scoping (Block scope and Function scope).?

After Reading this article I hope we will understand the following concepts.

• Difference between closure and lexical scoping.
• How we can explain concepts of closure and lexical scoping in an interview via example
• Why closures required lexical scoping.

So What is the concept of Lexical scoping in Javascript?

Lexical scoping encompasses everything the defined function can access.

//scope global
var a = 1;
void function one(){
  //scope [one]
  //lexical scope [one,global]
  var b = 2;

  void function two(){
    //scope [two]
    //lexical scope [one,two,global]
    var c = 3;

    void function three(){
      //scope [three]
      //lexical scope [one,two,three,global]
      var d = 4;
      console.log(a + b + c + d);
    }();
  }();
}();        

In the given example, three functions are defined and promptly invoked, a pattern often referred to as IIFE (Immediately Invoked Function Expression).?

In the first function, its lexical scope encompasses both its own scope and the global scope. Similarly, the lexical scope of the second function encompasses the scopes of function one, function two, and the global scope.

So What is the concept of Clouser in Javascript?

Clouser is a function that helps a defined function to access everything between itself and global scope, Even after the parent and above all functions have closed.

Here in the definition, we have two parts, First part refers to lexical scope but the second part is important to understand the concept of closure.

const parentFunction = () => {
let a = 2;
console.log(a);

const childFunction = () => {
console.log(a += 1);
}
return childFunction;
}
  
const result = parentFunction(); //Line 1
console.log(result); //Line 2
result(); //Line 3        

Let’s break the above example to understand step by step.

Upon the execution of Line 1, the scope parentFunction is established, leading to the printing of 2 in the console. Following this, parentFunction returns childFunction and the function's scope is terminated and subsequently closed.

Up to this point, the understanding is precise and evident.?

We are now aware that once the execution of parentFunction concludes, its scope is closed. Consequently, when we invoke result(), we are essentially calling the anonymous function that was assigned to childFunction. This function retains access to the variable (a) within parentFunction, even though parentFunction has already concluded and its scope has closed.

This capability arises from the closure that was formed during the definition of the function.

Summary

This article explores the interplay of closure and lexical scoping in JavaScript. Lexical scoping defines a function’s accessible scope, while closure enables a function to access variables even after its scope closes. The article provides examples of both concepts, highlighting their significance and how they coexist to enhance JavaScript’s functionality.

If you found this article to be useful, kindly show your appreciation by giving it a clap.