The Scope Chain, Scope & Lexical Environment

The ideas of scope, scope chain, and lexical environment are crucial to JavaScript. We are familiar with these terminologies, yet their responsibilities can be unclear at times. Let's explore more to see how they operate together.

Scope in Javascript is directly related to the lexical environment. Scope is where you can access the specific variable or a function in our code.

Case 1 :

function a(){
    console.log(b);
}
var b = 10;
a();

output

10

In the above code the function a() can access the variable b which is outside the function.

Case 2:

function a(){
    function c(){
        console.log(b);
    }
    c();
}
var b = 10;
a();

output

10

Here the function c(), which is inside the function a() can able to access the variable b.

Case 3:

Here the variable b is inside the function a()

function a(){
    var b = 10;
    function c(){
        console.log(b);
    }
    c();
}
a();

output

10

Case 4:

In this variable b is inside the function a() and trying to access the variable b outside.

function a(){
    var b = 10;
    function c(){
        console.log(b);
    }
    c();
}
console.log(b);
a();

output

ReferenceError : b is not defined

So, Scope means where you can access the specific variable or a function in our code.

In case 1: The function a() can able to access the variable b because b is in the global scope.

In case 2: The value of b is printed. It means that within the nested function also, the global scope variable can be accessed.

In case 3: The value of b is printed because the b is inside the local memory of the function a(). The function c() can able to accessed its because variable b is present in the lexical environment of its parent.

In the call stack = [global execution context , a() , c()]

c() = lexical environment pointer pointing to a().

a() = lexical environment pointer pointing to the global execution context.

global execution context = lexical environment pointer pointing to null.

Whenever execution context is created a lexical environment is also created.

The lexical environment is the local memory along with the lexical environment of the parent.

Lexical environment = local memory + lexical environment of parent.

The term lexical means in-hierarchy or in-sequence.

The Javascript engine first searches for a variable in the current local memory space, if it's not found. it will search for the variable in the lexical environment of its parent and if this is not found then it searches that variable in the subsequent lexical environment and the sequence goes on until the variable found in the lexical environment or the lexical environment become null.

The mechanism of searching variable in the subsequent lexical environment is known as the scope chain.

In case 4: A function can access a global variable, but the global execution context can't access any local variable. So it's showing the error.

If you found the article helpful, consider passing it along to fellow developers. Happy coding 💻