🔧 What are Scope, Scope Chain, and Lexical Environment?🔥

Scope

• Scope refers to the areas in our code where a specific variable or function can be accessed.
• Scope in JavaScript is directly related to the Lexical Environment.

function x(){
  console.log(y); //It can access b, which is defined outside the function.
}
var y = 10;
x();    // 10
-------------------------------------------------------------------------
function x(){
  z();
  function z(){
    console.log(y); 
  };
};
var y = 10;
x();    // 10
-------------------------------------------------------------------------
**Case 1**

function x(){
  var y = 10;
  z();
  function z(){
    console.log(y); 
  };
};
x();    // 10
-------------------------------------------------------------------------
**Case 2**

function x(){
  var y = 10;
  z();
  function z(){

  };
};
x();  
console.log(y);   // ReferenceError: y is not defined.

Lexical Environment

Whenever an Execution Context is created, a Lexical Environment is also created. The Lexical Environment consists of the local memory along with a reference to the lexical environment of its parent. 'Lexical' refers to hierarchy, sequence, or order.

Local Memory + Reference to the Lexical Environment of its parent.

Scope Chain

The chain of all lexical environment references to parent contexts is known as the Scope Chain. The process of finding y through this chain is referred to as Scope Chain resolution.

GEC => Global Execution Context
M => Memory Component
C => Code Component

Whenever code is executed, a Global Execution Context is created. When the Global Execution Context is created, it is pushed onto the call stack.

"y" is lexically inside the "x" function, and "x" is lexically inside the Global Execution Context.

Refer to the above diagram. Assume the red box represents a reference to the lexical environment of its parent.

The lexical parent of z is x() because z is lexically inside x(). The z function has a red box, which refers to the lexical environment of x (i.e., x's memory space + the lexical environment of its parent). Similarly, x has a red box that references its own memory and the lexical environment of its parent (GEC). The lexical environment of the global parent is null because there is no further lexical environment to search. At this point, the program stops, and the JavaScript engine throws an error.

In Case 2The JavaScript engine will first try to find the value of y inside the local memory of z(). If it is not found there, it will look in the lexical environment of its parent, x(). The engine will then check the local memory of x(). If the value is still not found, it will proceed to the lexical environment of the global execution context (GEC). The GEC will search for the value in its local memory. If the value is not found there either, and the lexical environment of the global context points to null, the program stops. At this point, the JavaScript engine throws an error stating that y is not defined.

In Case 1The JavaScript engine will first try to find the value of y inside the local memory of z(). If it is not found there, it will check the lexical environment of its parent, x(). In the local memory of x(), the engine finds the value of y.

Credits to Akshay Saini.