Understand JavaScript Execution Context Like a Pro

Photo by Mohammad Rahmani on Unsplash

JavaScript has been one of the most popular programming languages in the world. Many latest technologies and libraries like Node, Express, React run over JavaScript. Even programming language like TypeScript is built on top of JavaScript.

I bet there are a lot of developers using JavaScript but most of them do not know how the JavaScript code is executed internally. This was the case with me as well around 3 months ago. You must be wondering why would one even require to know how JavaScript executes. But my friend, knowing this would help you to improvise debugging, optimise performance etc.

In this tutorial, we will understand how the JavaScript code executes with the help of an example.

Code Example

var a = 10;
var b = 20;

function sum(n1,n2){
  var result = n1 + n2
  return result
}

var r = sum(a,b)
console.log(r)

This is the code that we will be using throughout the article.

Before we start.

JavaScript Call Stack

The JavaScript Call Stack is a mechanism used by the JavaScript engine to keep track of function calls during program execution. It follows the LIFO (Last In, First Out) principle, where the last function added to the stack is the first one to finish and be removed.

Understanding the Global Execution Context

Whenever a JavaScript program is run, the Global Execution Context is created in the call stack. This serves as the foundation for other execution contexts. Wondering what is an Execution Context? Don’t worry.

An Execution context is a concept used by JavaScript engine to manage the execution of the code. It contains all the necessary information like variables, functions, this etc. that is required for the execution to happen.

Phases of the execution context

Execution context consists of two phases:

1. Memory Allocation/Creation Phase.
2. Execution Phase.

See the Execution in Action

Let’s understand the execution by using the code example above.

The program is started and a Global Execution Context is created.

Current Call Stack Status

// JavaScript Call Stack

gec{....} // Global execution context

Memory Allocation Phase — Global Execution Context

Please note that all the variables here will be allocated memory initially but since they are not initialised yet, they will have a value of ‘undefined’ which is a type in JavaScript.

Also, the functions defined here will also be allocated the memory and they will have the code of the function stored in the memory block.

This is the state of the execution after the memory allocation phase.

// all the variables will be set to undefined
var a = undefined
var b = undefined
var r = undefined

function sum = {....} // braces represent function's code.

Execution Phase — Global Execution Context

Once the memory is allocated, it is the time to start the execution. The code flows line-by-line till a function call is encountered.

// state of memory before the sum function call

var a = 10
var b = 20
var r = undefined

function sum = {....} // braces represent the code of the function

Once the function sum is called, JavaScript creates another execution context for the function and pushes it to call stack.

Current Call Stack Status

// JavaScript Call Stack
sum{....} // function sum's execution context
gec{....} // global execution context

Memory Allocation Phase — Sum Function Execution Context

Now, once the execution context of the function is created, the memory needs to be allocated. Similar to what we have seen in the previous memory allocation, following will be the state of the memory

// Initial memory allocation for function - sum

var n1 = undefined
var n2 = undefined
var result = undefined

Execution Phase — Sum Function Execution Context

Let’s begin executing the function.
n1 will be initialised as 10 (passed in function args)
n2 will be initialised as 20 (passed in function args)
result will be set as 30 (upon function calculation)

This would be the final memory state before the return statement is executed.

// Final memory state before return statement execution

var n1 = 10
var n2 = 20
var result = 30

Once the function returns the value, it will be popped off from the call stack.

Current Call Stack Status

// JavaScript Call Stack

gec{....} // Global execution context

Since, the function returned a value, it will be assigned to the variable ‘r’. So current global execution context memory state will be:

// state of memory after the sum function call

var a = 10
var b = 20
var r = 30

function sum = {....} // braces represent the code of the function

After this the web API console.log will be called with the value of ‘r’ and the program will terminate thereby removing the Global Execution Context from the call stack and releasing the memory.

Short Video Demonstrating JavaScript Execution

At the end of this article, I would like to attach a video demonstrating the JavaScript execution. I hope this will help you clearly understand the content of the article.
With this, happy coding!

Don’t forget to follow me on LinkedIn: https://linkedin.com/in/erneelesharora