Execution Context & Call Stack

You are reading Part 33 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]

Introduction

JavaScript executes code in a structured manner using execution contexts and the call stack. Understanding these concepts helps developers debug and optimize code efficiently. This article explores how JavaScript processes execution contexts, manages scope, and utilizes the call stack.

1. What is an Execution Context?

An execution context is the environment in which JavaScript code is executed. Each execution context contains:

• Variable Environment: Stores variables, functions, and objects.

• Lexical Environment: Defines variable scope and function closures.

• this Binding: Determines the value of this in the current context.

Types of Execution Contexts:

1. Global Execution Context – Created when a script starts execution.

2. Function Execution Context – Created for each function call.

3. Eval Execution Context – Created when eval() is executed (not recommended).

Example of Execution Context Creation:

var name = "Alice";
function greet() {
    console.log("Hello, " + name);
}
greet();

Execution Context Flow:

1. Global Context Created → name is stored.

2. Function Execution Context Created → greet() is executed.

3. Function Execution Context Destroyed → After execution, memory is released.

2. Call Stack in JavaScript

The call stack is a stack data structure that keeps track of function calls.

How the Call Stack Works:

1. When a function is called, it is pushed onto the call stack.

2. When a function completes, it is popped off the stack.

3. JavaScript executes the function at the top of the stack first.

Example of Call Stack Operations:

function first() {
    console.log("First function");
    second();
}
function second() {
    console.log("Second function");
    third();
}
function third() {
    console.log("Third function");
}
first();

Call Stack Flow:

1. Global Execution Context
2. first() pushed onto stack
3. second() pushed onto stack
4. third() pushed onto stack
5. third() popped off
6. second() popped off
7. first() popped off

Output:

First function
Second function
Third function

3. Synchronous vs. Asynchronous Execution

JavaScript executes code synchronously using the call stack but handles asynchronous operations using the event loop.

Example of Synchronous Execution:

console.log("Start");
console.log("Middle");
console.log("End");

Output:

Start
Middle
End

Example of Asynchronous Execution:

console.log("Start");
setTimeout(() => console.log("Timeout Executed"), 2000);
console.log("End");

Output:

Start
End
Timeout Executed (after 2 seconds)

• The call stack processes console.log("Start") and console.log("End") first.

• setTimeout() moves execution to the Web API and runs later.

4. Execution Context Lifecycle

Each execution context goes through three phases:

1. Creation Phase:

   • Global or function execution context is created.

   • Variables and functions are stored in memory (hoisting).

2. Execution Phase:

   • JavaScript executes code line by line.

   • Updates variables and calls functions.

3. Destruction Phase:

   • After execution, memory is cleared.

Example of Execution Context Lifecycle:

console.log(a);
var a = 10;
console.log(a);

Execution Context Steps:

1. Creation Phase: a is hoisted but set to undefined.

2. Execution Phase: a is assigned 10.

Output:

undefined
10

5. Understanding Recursion & Stack Overflow

If a function calls itself repeatedly without a base case, the stack overflows.

Example of Stack Overflow:

function recursive() {
    recursive();
}
recursive();

Error:

Uncaught RangeError: Maximum call stack size exceeded

To prevent this, always define a base case in recursion.

Example of Proper Recursion:

function countdown(n) {
    if (n <= 0) return;
    console.log(n);
    countdown(n - 1);
}
countdown(5);

Output:

5
4
3
2
1

You are reading Part 33 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]