JavaScript Execution Context and Call Stack Explained

Source: Dev.to

What Is an Execution Context?

An execution context is the environment where JavaScript code is evaluated and executed.
Think of it as a container created by the JavaScript engine each time code runs. Everything in JavaScript runs inside an execution context.

The creation of an execution context occurs in two phases:

1. Memory Creation Phase
2. Code Execution Phase

Memory Creation Phase

• All variables and functions are allocated in memory before any code runs.
• Variables are stored with the value undefined.
• Functions are stored as their full definitions.
• The memory component holds these entries as key‑value pairs.

Code Execution Phase

• The engine executes the code line by line.
• Variable values are updated with the actual values from the code.
• Functions are invoked/executed.
• Each function call is pushed onto the Call Stack (also called the Thread of Execution).

This is why JavaScript is described as a synchronous single‑threaded language: it executes one line at a time in a defined order.

Types of Execution Contexts

Global Execution Context

• Created once when the JavaScript file first runs.
• Only one global context exists per script.

Function Execution Context

• Created each time a function is called.
• As many contexts can exist as there are active function invocations.

Example Walkthrough

let n = 5;

function multiplyByTwo(x) {
  return x * 2;
}

let output1 = multiplyByTwo(n);
let output2 = multiplyByTwo(output1);

1. Memory Creation Phase

   • n is stored with the value undefined.
   • multiplyByTwo is stored as a function object.

2. Code Execution Phase

   • n is assigned the value 5.
   • multiplyByTwo(n) is invoked → a new Function Execution Context is created and pushed onto the Call Stack.
   • After the function returns, its context is popped from the stack, and output1 receives the result.
   • The same process repeats for output2.

The Call Stack

The Call Stack is a LIFO (Last‑In, First‑Out) data structure that tracks active execution contexts.

Order of Operations

1. Global Context – created first.
2. first() – its context is pushed onto the stack.
3. second() – invoked inside first(), its context is pushed.
4. third() – invoked inside second(), its context is pushed.

When third() finishes, it is popped off the stack, followed by second() and then first(), returning control to the global context.

Why Understanding Execution Context Matters

• Predict hoisting behavior.
• Debug scope issues.
• Grasp closures.
• Avoid call‑stack overflows.
• Write better asynchronous code.

Conclusion

Execution Contexts and the Call Stack form the foundation of JavaScript. Once you master them:

• Closures become logical.
• Async behavior makes sense.
• Debugging becomes easier.