Javascript Execution Context

Most of the developers feel Javascript is a language which is funny, tricky, confusing etc.

IMO it is because we did not understand its working mechanism fully.

Execution Context is one such topic which is Javascript engine’s internal mechanism.

In this story we will get to know Execution Context which will help us improve our understanding of Javascript.

Prerequisites:

Basic understanding of javascript, Variables and Functions.

Execution Context:

Consider Execution Context as a box (actually memory heap…) in which JS Engine stores the values of variables, objects and functions at the beginning of the compilation. Later when we call a function or a variable the value will be retrieved from here.

Phases of Execution Context:

1. Creation Phase
2. Execution Phase

Creation Phase:

For every Execution Context initially the JS Engine will go through the code and get the variables and functions .

Variables will be initialized with value undefined at creation phase.

Functions will be taken completely and stored in the execution context

Tthis is the reason if we try to call a variable before defining its value we get Undefined as the value.

if we try to call the function before its definition also we will be able to run the program without error.

This behavior is known as Hoisting.

Example:-

var a = 10;
var b = 20;
foo();
function foo(){
//function body;
}

The Execution Context of above example.js code at creation phase will look like.

Execution phase:

Now in the Execution context the JS Engine goes line by line and executes it. During Execution phase only the variables will get its values.

In the above program first a will get its value, then b will get its value and then foo will be called after that as there are no further lines to execute the JS Engine will stop executing and delete the execution Context. Below is how the Execution context will look like in the Execution phase.

Now that We understand what execution context is and what is the Creation and Execution phase in Execution Context.

Lets move to Execution Stack, Execution Stack is the stack where the execution context are stored and executed in FILO order.

For every Function call an execution context will be created in Execution Stack on top of the last execution context.

Before we see how Execution Stack will look like lets see the types of Execution Context

Types of Execution Context,

There are two types of execution Context

1. Global Execution Context
2. Functional Execution Context

Global Execution Context : is the main execution context which will store the global variables and functions. It is created at the beginning of the compilation [program the first one to be pushed into Execution Stack. Will get deleted/destroyed when all the code is executed.

Functional Execution Context: This is also called as the Local Execution Context, When a function is called, at that time the function body will be compiled by JS Engine and an execution context will get created for that function specifically. This will also follow the creation phase and Execution phase.

This will get Deleted/Destroyed when the function is executed.

Below is another example code

var a = 10;
var b = 20;
foo();
function foo(){
   var a = "a string";
   var b = "b string";
   function bar(){
      var a = 5*40;
      var b = {};
      console.log(a,b);
   }
   bar();
   console.log(a,b);
}
console.log(a,b);

The output of the code will be

200 {}

a string b string

10 20

Execution stack will look like

And when JS Engine in the line foo() function call, functional execution context will be created.

At the end of the execution phase of the Bar function the execution stack will look like this.

Then the Execution context of bar will get destroyed after displaying values a,b and foo will display value of a,b and that execution context will get destroyed. Finally the main execution context will display the value of a,b and that also will get destroyed.

That is all about Execution context please comment if you have any doubts!

And to solidify your understanding try creating execution context of below code and try to guess the answer.