Inside JavaScript: Scope and Lexical Environment 🚀

The scope in JavaScript is directly related to the lexical environment. If you understand the lexical environment, it will be very easy to grasp scope and the scope chain. 🤔

Let’s take a function and a variable below 👇

function a() {
console.log("THIS IS A FUNCTION");
}
var x = 10;
a();

Can we access the variable x inside the function? Let's check it out.

function a() {
console.log("VALUE OF X: ", x);
}
var x = 10;
a();

When I do console.log inside the function, what do you think will be the output?

When the JavaScript engine reaches this line of code and tries to execute console.log for the variable x, it will first check if x exists in the local memory space of the function's execution context. Since x was never created inside the function, it won't be found there.

But in the console, it prints the value of x inside the function since x belongs to the global memory space.

This was pretty easy. Let’s dive into something more complex 🔪

If I put another function inside function a, and try to access the value from the new function, what will happen now? 🤔

function a() {
b();
function b() {
console.log("VALUE OF X: ", x);
    }
}
var x = 10;
a();

It has accessed the variable inside the function again, which is only possible because the variable is declared in the global execution context’s memory space.

What if I declare the variable inside one of the functions? 🤔

function a() {
var x = 10;
b();
function b() {
console.log("VALUE OF X: ", x);
    }
}
 
a();

Can I still access the variable x in the child function? Of course, yes! 🎉

But if I try to access the declared variable outside the function, will it still return a value in the console? 🤔

function a() {
var x = 10;
b();
function b() {
// VARIABLE X IS NOT DEFINED HERE
    }
}
 
a();
console.log("VALUE OF X: ", x);

What do you think will be the output? 🤔

Wonk, wonk! A ReferenceError. 😢

Here’s where scope comes into action. Scope determines where you can access a specific function or variable in the code.

The variable is declared inside the scope of function a, and the scope directly depends on the lexical environment.

Visual Representation 🖊️

When we execute this program, a global execution context is created and added to the call stack.

As you already know, the global execution context has memory and code as its components. When the program is executed, it will assign values to global variables and functions. Since function a is in the global memory, it will assign a value to it and then invoke it.

When function a is invoked, its execution context is also created.

Initially, the variable will be set to undefined, and the function will be assigned its body. Once the function starts executing line by line, undefined is replaced with the actual value of the variable.

Once the code reaches the line where another function, b, is invoked, it will create a new execution context.

Whenever an execution context is created, a lexical environment is also created. The lexical environment is the local memory, along with the lexical environment of its parent.

The term lexical refers to a hierarchy or a sequence. We can say that function b is lexically inside function a, and function a is lexically inside the global scope.

Whenever an execution context is created, you also get a reference to the lexical environment of its parent. The lexical parent of function b is function a. The lexical environment of a function includes its memory space plus the lexical environment of its parent, so function a's memory space plus the lexical environment of its parent, which is the global memory space. The global memory space also has a reference to its lexical parent, and at the outer level, it points to null as it does not have any parent.

Suppose you do a console.log of variable x inside function b. When the JavaScript engine encounters this line, it tries to find x in the local memory space of function b. When it fails to find x, it goes to the reference and visits the lexical environment of its parent, which is function a, where x is declared. Once it finds the variable x, it goes back to function b and prints it. Otherwise, it will move to the lexical environment of function a, and if it fails to find x there, it will move to its parent, which is the global lexical environment. If it does not find x there as well, it will move to the global lexical environment's parent, which is null, and the program will end with a ReferenceError.

This whole chain of lexical environments is called the scope chain. 😅

Connect with me 🍕

If you have any questions, feel free to reach to me on LinkedIn 🚀