Understanding Global Execution Context and Execution Context Stack

This blog will help you understand javascript better, here you will learn about Execution context and Execution context stack.

Execution context(EC)

It is like an environment where javascript code is evaluated and executed. Whenever any code in javascript is executed, it is run in Execution context.

Types of Execution context

            1. Global Execution context 
            2. Functional Execution context
            3. Eval function Execution context.

Global Execution context

This is the default execution context. The global code, (i.e the code which is not in the function and object) is executed in it.
Since javascript is single-threaded, only one execution context is possible.

Function Execution context

The code inside the function is executed here. Multiple execution contexts are possible because there will be chances of having multiple functions inside one program.

Eval function Execution context

The code inside the eval function is executed here. This is the rare function used by developers.

Execution Context stack

It is used to store the execution contexts. Whenever the javascript code starts its execution global execution context is created and the execution context stack is created (Calling stack). It works based on 'Last in, first out'.

When the javascript engine starts executing the javascript code global execution context is created and pushed on the top of the call stack. When it reaches a function in a code, the functional execution context is created and pushed on the top of the stack.

It looks kinda overwhelming, right?. Let me explain with a simple program and diagrams.

Let's take a small code.

     console.log("Hello");

     function first(){
       console.log("First");
       second(); //Second function is called here.
      }

     function second(){
      console.log("Second");
      }

     first();//first function is called here.

     Console.log("End");

When the JS engine starts executing, the global execution context is created and pushed to the top of the call stack.

After it prints Hello, it starts executing line by line. When the JS reaches the line(shown below), the first function is pushed to the top of the call stack and starts executed.

first();

After pushing to the call stack, It starts executing the first function line by line. So, it prints "first" and there is the second function is called. When the JS engine reaches the line(shown below), the second function is called and it is pushed into the call stack.

second();

The second function starts executed and prints "second". After that inside the second function, there is nothing to execute. After completing the execution of the second function, it is popped out of the stack. This is called "Last in, first-out". After that, there is nothing to execute in the first function. So, it is popped out of the call stack.

After executing all the code, the global execution context is popped out of the call stack. This is how the execution context stack is created.

Now, let's talk about the Execution context. It has two phases,
1.Creation phase
2.Execution phase

Creation phase

In this phase the JS engine scan through the code, it allocates memory for all variables and functions. For variables, it will allocate memory and assign an undefined. It will not execute any code.

Execution phase

In this phase, the JS engine starts executing the code line by line. It assigns values to the variable and executes the function calls.

Let's take some example code,

   let a = 3;
   let b = 4; 

   function add(num1,num2){
     let result = num1+num2;
     return result;
   }

   const addition = add(a,b);
   console.log(addition);

In the creation phase, the variables are stored "key: value" pairs(shown in the diagram). Now the code is not executed, just memory is allocated, for the variables it allocates undefined, and for function, it just copied the code. Along with this, it creates a global object (i.e window in the browsers) and creates this binding object, which points global object.

Now it starts executing the code line by line, in execution code, the values are assigned to a variable(shown below). When it reaches the function add another execution context is created. It is called a functional execution context. In that also two phases are there, creation and execution. Inside that creation phase, memory is allocated for the variables with the value of undefined(shown below).

After that execution starts and values are assigned and execution start (i.e values are added and stored in the result). The below diagram shows that function is executed and stored.

After that, it returns the value and stores it in the addition variable.
Now the add function is popped out of the stack.(shown below)

After printing the variable the global execution context is popped out of the call stack.

That’s it and if you found this article helpful please hit the like button and feel free to comment below! I’d be happy to talk 😃.