DEV Community

Ashlyn Joshy
Ashlyn Joshy

Posted on • Originally published at ashlynjoshy.hashnode.dev on

1

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 💻

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more