Scope, Scope chain and Lexical Environment in JS

Scope

Scope is the place where you can access the values of your variables or functions in our code. There are three types of scopes are availble in JS: Global Scope, Local/Function Scope, and Block Scope.

Global Scope

When you open up a JS document, you are in the Global scope. Anything you write in the Global scope is accessible from everywhere in the JS. They are also available for the lifetime of your application and deletes only when the application ends.

Since the Global scope variables are available anywhere within the code, it is considered as a bad practise. Using the Global scope makes your code less reusable, introduces namespace collision opportunities, and makes functions more likely to be influenced accidentally by global variables.

Local/Function Scope

Whenever you are creating a function, you are creating a local scope. The variables declares inside a function is accesible to that function only and that scope is called Local scope or function scope.

Block Scope

Block scope tell you if a variable is declared inside a code block {…} and it is only visible inside that block. const and let are block scoped variables. Block scope does not apply to var.

{
    var x = 3;
    let y = 4;
}
console.log(x);   // prints 3
console.log(y);   // Uncaught ReferenceError: y is not defined

Lexical Scope

Lexical scope (also referred to as static scope) is the ability of an inner function to access the scope of an outer function. Inner functions contain the scope of parent functions even if the parent function has returned.

Lexical environment

A lexical environment is a data structure that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object or primitive value]. A lexical environment also holds a reference to a parent lexical environment.

Lexical in general means in hierarchy or in a sequence.Whenever a new execution context(EC) is created a new lexical environment is created and it is referenced in local EC in memory space.

Lexical Environment: Local Memory + Lexical Environment of its Parent

function a() {
    var b = 10;
    c();

    function c(){
        console.log(b);   // prints 10
    }
}

a();
console.log(b); // now when cursor comes here, it prints NOT DEFINED.

• In the above example function c is lexically inside function a and function a in lexically inside glodal scope.
• So in EC of c(), variables and function in c (none) + reference of lexical env of parent a() is there.
• LE of a() in turn is its memory space + reference to LE of parent (Global EC)
• LE of Global EC points to its memory space + NULL (as no parent for Global EC).
• When the console.log(b) in the function c executes, js engine will check the local memroy of function c for variable b. And the same is not found it will check the lexical environemt of its parent that is function a and gets the value of b from the memory space of function a.

Scope Chain

The JS uses scope to findout the exact location or accessibility of variables and that particular process is calles scope chain.

References

w3schools, stackoverflow, codeburst