Shameel Uddin

Posted on Mar 2 • Originally published at blog.hasab.tech

How JavaScript Works (Part 2) – Execution Context & Call Stack Explained in Simple Words

#javascript #webdev #frontend #coding

In Part 1, we explored how JavaScript runs under the hood and discussed the JavaScript engine and runtime environment.

In this part, we’re going deeper.

We will understand:

What is Execution Context?
What are the different phases and types of an Execution Context?
What is the Call Stack?
How functions are executed internally? And most importantly we’ll visualise everything with a simple code example.

Let’s begin.

What is an Execution Context in JavaScript?

Whenever JavaScript runs your code, it creates a special environment called an Execution Context.

Think of it as a container where JavaScript keeps everything needed to execute your code.

Phases of Execution Context

Each execution context goes through two phases:

1. Creation Phase (Memory Allocation Phase)

Before executing your code, JavaScript:

Scans the code
Allocates memory for variables
Stores function definitions in memory

Important behavior:

Variables declared with varare initialized with undefined
Functions are stored entirely in memory
let and const are hoisted but kept in a temporal dead zone No code is executed here. Only memory setup happens.

2. Execution Phase

In this phase, JavaScript:

Executes code line by line
Assigns actual values to variables
Runs functions when invoked
Evaluates expressions

This is where real execution happens.

Types of Execution Context

There are two main types of execution context:

1.Global Execution Context (GEC)

Created when JavaScript starts running your file
Exists only once and stays in the Call Stack until the program closes
Represents the global scope

2.Function Execution Context (FEC)

Created whenever a function is called or invoked
Each function call creates a new execution context
Has its own memory and thread of execution

What’s Inside an Execution Context?

Thread of Execution

This is the order in which JavaScript runs your code line by line.

JavaScript is (initially) single-threaded, meaning it executes one line at a time.

Memory

Each execution context has its own memory.

Global context → Global memory
Function context → Local memory

This is why variables inside functions are not accessible outside (unless returned).

What is the Call Stack?

JavaScript uses a special memory structure to keep track of all execution contexts called the Call Stack.

It follows LIFO structure, i.e., "Last In, First Out" (like a stack of plates).

The last function added to the stack, will be executed first, and will be popped out of the stack first.

How all of this works: Step-by-Step!

Let’s understand this using a simple example.

const firstName = "Munzah";
const lastName = "Shah";
const age = 27;
const designation = "Software Engineer";

function createFullName() {
  return firstName + " " + lastName;
}

function displayUserDetails() {
  console.log("Full Name:", createFullName());
  console.log("Age:", age);
  console.log("Designation:", designation);
}

displayUserDetails();

Step-by-Step Execution Breakdown

Step 1: Global Execution Context is Created

When the file runs:

Global Execution Context (GEC) is created
It is pushed into the Call Stack

Call Stack:

| Global |

Step 2: Creation Phase of Global Context

Memory is allocated:

firstName → undefined
lastName → undefined
age → undefined
designation → undefined
createFullName → function definition
displayUserDetails → function definition

Step 3: Execution Phase Begins

Now values are assigned:

firstName → "Munzah"
lastName → "Shah"
age → 27
designation → "Software Engineer"

Functions are still not executed just stored.

Step 4: Function Invocation Happens

When this line runs:

displayUserDetails();

A new Function Execution Context is created.

Call Stack becomes:

| displayUserDetails |
| Global             |

Now JavaScript executes displayUserDetails.

Step 5: Inside displayUserDetails()

The thread of execution encounters another function call:

createFullName()

Another Function Execution ExecutionContext is created.

Call Stack now looks like this:


| createFullName     |
| displayUserDetails |
| Global             |

Step 6: createFullName Executes

It returns:

"Munzah Shah"

Once function is completed:

Its result is returned to the parent execution context.
And It's execution context is popped out from the stack.

So now, call Stack becomes:


| displayUserDetails |
| Global             |

Step 7: Remaining Code In displayUserDetails() Function Executes

Now:

Age: 27
Designation: Software Engineer

After finishing the execution of this function:

displayUserDetails() context is removed
Stack pointer goes back to Global