Closure and Lexical scoping in javascript

What is lexical enviornment?

Every time of execution of the code in javascript, javascript engine creates lexical enviornment to know location of the variables defined in that source code. A lexical enviornment is a data structure that holds an identifier-variable mapping. If a function is nested, it defines how a variable will be available for the function. The word lexical refers to the fact that lexical scoping determines where a vaiable is available by access the location of variables in the source code.

Components of lexical scoping

Lexical enviornment has two components.

1. Enviornment record

   It stores all the variable and function declared within the function, and a reference to the outer enviornment, which is lexical scope in which the function was defined.

2. Reference to the outer enviornment

   It permits a function to access variables and functions declared in the outer enviornment(scope).

   A lexical enviornment(scope) looks like this.

   lexicalEnviornment(scope)={

   enviornmentRecord:{

   <identifier> : <value>

   <identifier> : <value>

   }

   outer: <Reference to the parent lexical enviornment>

   }

Why lexical scoping is important for closure?

Lexical enviornment determines scope in which a variable is defined and accessible. With the help of lexical scoping, closure allows the function to use variables from its parent functions. Closure cannot access the variable of the parent function without lexical scoping(enviornment).

What is closures?

A closure is the combination of a function and the lexical enviornment within which that function was declared. A closure has access to variables and parameters in its outer scope, even after the outer function has returned.

How closure works?

When a function is executed, a new context is created, which includes the local variables and parameters of the function. When the function completes, the execution context is destroyed, and its local variables and parameters are no longer available. However, if an inner function references a variable or parameter of the outer function inside the nested function, the inner function creates a closure. The closure allows the inner function to access variables and parameters of the outer function, even after the outer function has returned and its execution context has been destroyed.

Example

Let's see an example of closure and lexical enviornment.

function outerFunction( ) { //outer function

const outerVariable="Outer";

function innerFunction ( ) { //inner function

console.log(outerVariable);

}

innerFunction ( );

}

outerFunction ( ); //log: outer

Here both function are in nested form. outerVariable is defined in outer function's lexical enviornment. The innerFunction has also its lexical enviornment, which keeps the reference of the outer function's variable. The innerFunction makes closure and use the lexical enviorment to use the variable of outer function.