JavaScript Execution Context — How JS works under the hood

6 min readMay 8, 2023

Have you ever wondered about the inner workings of JavaScript? There are numerous processes that occur behind the scenes in order to execute any JavaScript code. This article will explain all the hidden processes that occur when you run JavaScript code on a web browser.

Javascript is a single threaded scripting language invented to execute web development simpler and more beautiful.

To gain a better understanding, let’s examine an example.

let number1 = 2;                              // line 1
let number2 = 3;                              // line 2
function addition(num1, num2){                // line 3
  const result = num1 + num2;                 // line 4
  return result;                              // line 5
}                                             // line 6
let sum = addition(number1, number2);         // line 8
console.log(sum)                              // line 9

In the above example:

number1 is initialized and assigned a value of 2
number2 is initialized and assigned a value of 3
defined a function named addition which accepts two parameters num1 and num2 then calculates the sum of num1 and num2 and assigned into result variable and then return the value of result.
calling a addition function and assigns the returned value into sum.
logs the value of sum.

JavaScript performs a multitude of tasks behind the scenes. Let’s delve into each one of them.

What is Execution Context?

When JavaScript reads a script file, it creates an environment called the Execution Context which manages the process of converting and running the code.

During the context runtime, the parser examines the source code and reserves storage for the variables and functions. The source code is then generated and executed.

There are two types of execution contexts:

global: The global execution context is generated when a JavaScript program first begins executing, and it defines the scope of the entire program.
function: Whenever a function is invoked, a function execution context is formed, which represents the local scope of the function.

Phases of the Execution Context

There are two phases of JavaScript execution context:

Creation phase: In this phase, the JavaScript engine creates the execution context and sets up the environment. It allocates memory for variables and functions and assigns undefined and function definition respectively as values.
Execution phase: In this phase, the JavaScript engine executes the code in the execution context. It processes any statements or expressions in the script and evaluates any function calls.

Everything in javascript happens inside this execution context. It is divided into two phases. One is memory and the other is code.

Creation Phase

Let’s look at an example one more time:

let number1 = 2;                              // line 1
let number2 = 3;                              // line 2
function addition(num1, num2){                // line 3
  const result = num1 + num2;                 // line 4
  return result;                              // line 5
}                                             // line 6
let sum = addition(number1, number2);         // line 8
console.log(sum)                              // line 9

At the start, the JavaScript engine runs the complete source code, sets up a global execution context, and then performs the following actions:

Create a global execution context.
Allocate memory for variables and functions, and assign them an initial value of undefined and function definition, respectively.

At the end of the creation phase, the execution context will appear as follows:

Once the creation phase is complete, the execution context will proceed to the code execution phase.

Execution Phase

In this phase the main execution takes place and the javascript runs through the code line by line:

Now the number1 value is changed from undefined to 2. Then it moves to the next line.
the number2 value is changed from undefined to 3 and moves to the next line, as there is nothing to execute it moves to line 8.
at line 8, a function is invoked, which creates a new function execution context within the global execution context. The creation and execution phases occur within this new context. creation phase allocates memory to variables and then execution phase executes code and assigns values to variables and then the function will assign the result of num1 + num2 into result variable and then return the value of result.

4. at line 8, returned value from addition() will be assigned to sum.

5. once the code execution is complete, the global context will appear as shown, and it will be destroyed.

In order to keep track of all contexts, global and function contexts, the JavaScript engine uses a call stack.

What is the Call Stack?

Call stack maintains the “Order of execution of execution contexts”. It operates like a stack, where the execution context of a new function that is called is added to the top of the call stack.

The global execution context (GEC) is situated at the bottom of the call stack since it is generated at the beginning of the program, and all subsequent execution contexts are added on top of it. Therefore, when a function’s execution is complete, its execution context is removed from the call stack.

for a better understanding, let’s see the following example:

function sum(num1, num2) {
    return num1 + num2;
}

function getResult(num1, num2, sumHandler) {
    return sumHandler(num1, num2)
}

var result = getResult(10, 20, sum);

console.log(result); // 30

Initially, it allocates memory for the sum and getResult function, followed by the result variable. Afterward, it calls getResult(), which is added to the call stack. Subsequently, getResult() invokes sumHandler(). Consequently, the context of sumHandler is placed at the top of the call stack.

After the execution of each function is complete, it will be eliminated from the call stack. The accompanying picture illustrates the entire execution process:

Conclusion

Understanding JavaScript’s Execution Context is crucial for comprehending many other fundamental concepts.

The Execution Context, which includes the Global Execution Context (GEC) and Function Execution Context (FEC), as well as the call stack, are the procedures performed by the JavaScript engine that allow our code to execute.

I hope you now have a clearer comprehension of the sequence in which code is executed, and how the JavaScript engine handles the code and this article has been helpful and enjoyable for you. If you have any questions or comments, please don’t hesitate to contact me. I would also appreciate 👏 if you like the post, so others can find this too.

If you enjoy reading this post, got help, knowledge, inspiration, and motivation through it, and you want to support me — you can “Buy me A Coffee.”Your support really makes a difference.

Thanks, and see you next time!