Scope chain and Lexical Scoping in JavaScript

Scope chain and Lexical Scoping are central ideas of JavaScript. These ideas confound new JavaScript developers. The information on these ideas is fundamental in dominating JavaScript. Having an appropriate comprehension of these ideas will assist you with composing better, more proficient and clean code. Which will, thus, assist you with improving as a JavaScript Developer.

So in this article, we'll discuss about Scope chain and lexical scoping, how JavaScript engine performs variable lookups and internals of these concepts.

So without further ado, Let’s get started 😀

Scope Chain

It is the process in which, JavaScript engine searches for the value of the variables in the scope of the functions. However, the search is in a lexical manner. First of all the engine looks out in the current scope of the current function. If not found, it finds it in the parent funtion.

If not there, global scope is the last place it checks in. If the variable is not found, it declares the variable in global scope, provided you aren't in strict mode. Hence, to find value of the required variabe, a chain is formed by looking in scopes of different funtions.

var a = "Hello world";

function first() {
    var b = "I am Rahul.";
    second();

    function second() {
        var c = " Subscribe to RAHULISM";
        console.log(a + b + c);
    }
}
first();
// Hello worldI am Rahul. Subscribe to RAHULISM

To explain scope chain we go through this function above. We have three scopes here global scope, parent scope and child scope. Since we are adding all the variables, the program will search for variable a in scope of function "second" (child scope). As there is no such variable in "second", the program continues to look for variable a in scope of parent function "first" (parent scope).Not being able to find a here as well the program now exits the scopes of all the functions and goes to the global scope. After finding value of a it goes to the arithmatic problem i.e, a+b+c, in the function "second", and searches for the next variable b.

After following the same procedure, the program finds b in scope of parent function i.e, "first". Eventually, it searches for the third variable c and finds it in scope of the child function "second".

Lexical Scoping

Lexical scoping is a type of object oriented programming according to which, a child can access parent scope and global scope. Similarly a function can access global scope. Recalling the previous example,

var a = "Hello world";

function first() {
    var b = " I am Rahul.";
    second();

    function second() {
        var c = " Please subscribe to RAHULISM newsletter";
        console.log(a + b + c);
    }
}

Here the function is called in the child class. So the result clearly shows, when var a is called, the engine looks for it in the child class "second" and moves on to the parent class "first" and then finds the var a in the global scope ultimately.

Lets discuss another scenario here. Another function "three" in the global space is introduced in which, var d is declared, "Please subscribe to RAHULISM newsletter". We call the console.log(a+b+c+d); in "three" to see if it can access "first" and "second". Also we call "three" in "second".

var a = "Hello world...";

function first() {
    var b = "I am Rahul.";
    second();

    function second() {
        var c = " Subscribe to my RAHULISM newsletter.";
        console.log(a + b + c);
    }

    function third() {
        var d = " ⚡⚡";
        console.log(a + b + c + d);
    }
}

first();

The reason program couldn't look for var b is that, its not a global variable, so when console.log(a+b+c+d) is called in "three" it could not locate var b in "three" because var b is not declared in "three". By removing var b the error still exists because same is the case with var c as its not a global variable.

function third(){
    var d = " Subscribe to my RAHULISM newsletter.";
    console.log(a+c+d);
}
// returns c is not defined.

This issue is resolved by removing both the variables, then the result is as follows:

var a = "Hello world...";

function first() {
    var b = "I am Rahul.";
    second();

    function second() {
        var c = "Subscribe to my RAHULISM newsletter.";
        console.log(a + b + c);
    }

    function third() {
        var d = " ⚡⚡";
        console.log(a + d);
    }
}
// > Hello world... ⚡⚡

Another scenario where the parent function "first" can not access child function "second" scope,

var a = "Hello world...";

function first() {
    var b = "I am Rahul.";
    console.log(c);
    second();

    function second() {
        var c = "Subscribe to my RAHULISM newsletter.";
        console.log(a + b + c);
    }

    function third() {
        var d = " ⚡⚡";
        console.log(a + d);
    }
}

Here var c is called in parent function "first" and same error is displayed which says var c is not defined.

c is not defined.

Hence, in lexical scope child can access parent scope and global scope but parent can't access the child scope and if a variable is not defined in another function, it can't be called aswell.