Ashish's Blog

Execution Context in JS

Ashish Gupta's photo
Ashish Gupta
·

3 min read

Execution Context in JS

JavaScript is a single-threaded and synchronous language. And everything in JS happens inside an Execution Context.

Either you write a single line or thousands of lines inside a JavaScript program everything will be implemented with the help of Global Execution Context. Each JS program has its own Global Execution Context and inside it, the program can have multiple execution contexts.

So, what is Execution Context?

Execution Context

Execution Context is the environment where JS code is executed. In Execution Context, we can access the values of variables, functions, objects for a particular program.

Execution Context consists of two things - Memory and Code.

image.png

Execution Context can be of two types:

  • Global Execution Context - It is the default execution context for the JS program and it is created whenever the file loads on the browser. All global code that is not inside any function is executed in this Global Execution Context. For any JS program, there will be only one Global Execution Context.
const num1 = 10;
const num2 = 20;
const add = num1 + num2 ;
console.log("Add - ", add);

// Output
Add -  30

image.png

  • Functional Execution Context - It is created by the JS engine whenever it finds a function call. Every function has its own Execution Context whenever they're invoked. And if we have another function call inside the previously called function then it'll again create a separate Execution Context for that inside its parent Execution Context.
const num1 = 10;
const num2 = 20;
function add(a, b){
    const c = a + b ;
    return c
}
const result = add(num1, num2);
console.log("Add - ", result);

//  Output
Add - 30

image.png

Execution Context Stack

As we know that JavaScript is a single-threaded language so it can perform only one task at a time, and if in case, we have multiple execution contexts then the contexts are placed inside a stack which is known as Execution Context Stack and at a single point of time, only one execution context will have the control. Once the execution context will be implemented completely, it will immediately be popped out of the stack.

image.png

Phases of Execution Context

JS engine executes the code in two phases of Execution Context.

We'll be taking the below example to understand the phases of the Execution Context.

const num1 = 10;
const num2 = 20;
function add(a, b){
    const c = a + b ;
    return c
}
const result = add(num1, num2);
console.log("Add - ", result);

//  Output
Add - 30

  • Memory Allocation Phase

In Memory Allocation Phase, the JS engine will be in the compilation phase and it'll scan all the code but it'll not execute the code. In this phase, the JS engine will put all variables, functions, and objects in the memory.

For all declared variables it will assign - undefined and for functions, it'll write the whole code as it is.

image.png

  • Code Execution Phase

In the execution phase, the JS engine will again scan through the code to update the variable object with the values of the variables and will execute the code.

image.png

Summary

Hopefully, by now you're aware of the working of the JS engine. Understanding the execution context and stack allows you to know the reasons behind why your code is evaluating different values that you had not initially expected.

Please provide your valuable feedback and ask your queries in the comments.

ThankYou!

JavaScriptjsvanilla-jsHoisting