Javascript Execution Context

When we run any Javascript code, the environment in which it is executed is very important and this environment where JavaScript code is executed is called Execution Context.

This environment comprises of variables, objects, functions, this our Javascript code can access.

In JavaScript, Execution context are of three types-

1. Global Execution Context- The default execution context in JS code is Global execution context. In most of the cases, it is window in a web browser. This is the environment where your code is executed for the first time in the browser. Global execution context cannot be more than one because only one global environment is possible for JS code execution. It creates the global execution context before it starts to execute any code
2. Functional Execution Context- Functional execution context is the context created during the execution of code inside a function. Each function has it’s own execution context. We can have multiple number of function context, and each function call creates a new execution context, which creates a separate scope where anything declared inside the function can not be accessed outside the current function scope directly.
3. Eval- Execution context inside internal eval function.

When a function is executed, an execution context is created and virtually placed at the top of the call stack. Once a function has finished executing, it gets popped off from the call stack. Hence,The call stack is a collection of execution contexts.

// global Execution Context
var age =12;
function parent(){
   // Function Execution Context
   var name = 'Aastha'; 
   console.log("Executing parent Function");
   
     // Another Function type Execution Context
     child(){
     return name
   }

As soon as the above code loads into the browser, a global execution Context is created and pushed on call stack and when parent() will be executed from Global Execution Context then child Function Execution Context for Parent() will be pushed on Execution Call Stack. And after the execution of Parent() then its Execution Context will be removed. Similar goes for child().

So order would be-
-> declare new variable age & assign value  and then Push it in Global Execution Stack 
-> declare a new variable var Parent = Parent(){...} & pushed in Local Execution Stack
-> declare a new variable var child = child(){...} & pushed in Local Execution Stack 
-> After function execution, Pop child() Execution Stack
-> After function execution,Pop Parent() Execution Stack 
-> After complete execution, Pop Global Execution Stack

How JavaScript engine creates the execution context

Inside the JavaScript interpreter, execution context is created in two phase-ation phase

The Creation Phase

In this phase, JS Engine is in the compilation phase and it scans over the function for code compilation. Global Execution Context is created. It also creates variables, functions, arguments and determine this object.

The Code Execution Phase

In this phase, JS Engine will declare a new variable and assign values, references to functions and executes the code.

This is created at Creation Phase

executionContextObj = {
    'scopeChain': { /* variableObject + all parent execution context's variableObject */ },
    'variableObject': { /* function arguments / parameters, inner variable and function declarations */ },
    'this': {}
}

Example Illustration-

function parent(first_name) {
    var last_name = 'Gupta';
    function child() {
      ...
    }
    var get_age = function age(){
      ...
     }
}

parent('Aastha');

Creation Stage would be-

Here we will declare the variables, assign the values , its scope chain and wait for the execution.

parentExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 'Aastha',
            length: 1
        },
        first_name: 'Aastha',
        child: pointer to function child()
        age:undefined,
        last_name: undefined,
    },
    this: { ... }
}

Once the creation phase is done, the flow of execution enters the execution phase and execution will look like this. After the execution of the function, the execution context will also be destroyed(popped out).

parentExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 'Aastha',
            length: 1
        },
        first_name: 'Aastha',
        child: pointer to function child(),
        last_name: 'Gupta',        
        age: pointer to function age(),
        
    },
    this: { ... }
}

That’s all folks. Hope you like it.