JavaScript Execution Context and Lexical Environment Explained.

Photo by Shane Rounce on Unsplash

As a JavaScript Programmer have you ever wondered how JavaScript engine executes your code when its run inside the browser? And how they keeps track the local scoping using Lexical Environment when they executed?

In this article I will explain to you how it works behind the scene.

When your code runs in the JavaScript Engine. Each statement of your code is executed in a certain Execution Context.

In JavaScript environment there are 2 main types of Execution Context. First is Global Execution Context, when your code is initially run even if it’s spread across to a page using a <script /> tag, JavaScript creates one Global Execution Context in which your code was placed in when they execute and runs inside the browser. Second is the Function Execution Context from the word itself it was created when you invoked the function that you define.

Each time you invoked a function it will create a new Function Execution Context.

For instance:

var message = ‘Hello there’;

function foo(message) {bar(message);}

function bar(message) {console.log(message);}

foo(message);

When this code runs, JavaScript engine create one Global Execution Context and push it to Execution Context Stack.

Execution Context Stack — is a placed where our Global and Function Execution Context was handled and manipulated.

When we call the function foo, Global Execution Context was paused because JavaScript is a single threaded environment they can only execute one code at a time. After that JavaScript engine will create a new Function Execution Context for foo and push it into Execution Context Stack, when foo function executed we invoked the bar inside foo definition**.** JavaScript engine paused the execution context in foo function and creates a new Function Execution Context for bar and pushed it into stack. After the bar was finished executing it will popped out in the Execution Context Stack and go back to foo and resume its execution. Same process will applied to the foo until we finished and go back to the Global Execution Context and resume the execution.

How Execution Context push in Execution Context Stack.

As we already know how the JavaScript Execution Context Works let’s dive in to Lexical Environment and explained how they works.

Most likely Lexical Environment works in code nesting when you have a function and inside that function you have another function.

For instance:

var a = ‘a’;

function foo() {

var b = ‘b’;

function bar() {var c = ‘c’;

console.log(c); // You can access me here.     
console.log(b); // You can access me too..  
console.log(a); // You can also access me..  

}

bar();

}

foo();

Nothing special here in our code we define a nested function.

When this code runs initially a Global Environment was created and a and foo was stored in that. When we invoked the function foo below a new environment was created and stored the variable b in foo environment which is only visible to bar function because bar is an inner function in foo environment. When invoking the foo() we also called the bar() function which is also creates a new environment for their definition.

“Whenever we call a function, a new function execution context is created and pushed into execution context stack with a new associated lexical environment [[Environment]]”.

Diagram for Lexical Environment how they works

Inside the bar function we do logging to checks if the variables that we create is visible and if we can access it in their environment.

When variable c was logged in the bar environment, it was displayed successfully obviously because it was inside his environment.

However when when we do logging the variable b and variable a it was also successfully displayed. How this is happened?

Lets discuss.

In the second logging we call the variable b which is not in bar function scope**.** So javascript does this internally to search it in other O**uter Environment** until they found that variable. In our case, they found the variable b at foo function since the bar function has reference to foo function the foo function environment is not pop out in the Execution Context! When variable a was logged it was also successfully displayed because variable a is stored in the Global Execution Context. Everyone can access the Scope in the Global Execution Context.

Accessing other environment

Now that you understand how the Execution Context and Lexical Environment works Internally in JavaScript. You may now avoid some subtle bugs in your JavaScript Program.

If you enjoy reading this article give a clapped for me…

Hope it Helps ^_^

Thanks.

“Don’t be a JavaScript Mediocre.”

Follow me on twitter https://twitter.com/llaudevc/