How JavaScript Execution Contexts and Call Stack Shape Your Code

Execution Context Overview

When the JavaScript engine begins to execute code, it creates an execution context , which represents the current execution environment and forms a scope. The runtime can be in three kinds of contexts: the global environment, a function environment (when a function is called), and an eval environment.

Call Stack (ECStack)

Every JavaScript program generates multiple execution contexts that are managed by a stack, often called the call stack or ECStack . The bottom of the stack always holds the global context, while the top holds the context that is currently executing.

When code encounters a situation that creates a new context, the engine pushes that context onto the stack; once the top context finishes execution, it is automatically popped off.

Step‑by‑Step Example

Step 1: Global context enters the stack

After the global context is on the stack, its executable code runs until it reaches changeColor(), which activates the changeColor function and creates its own execution context.

Step 2: changeColor context enters the stack

Inside changeColor, the code encounters swapColors(), which pushes the swapColors context onto the stack.

Step 3: swapColors context enters the stack

The swapColors code finishes without creating further contexts, so its context is popped from the stack.

Step 4: swapColors context exits the stack

After swapColors exits, execution returns to changeColor, which then completes and is popped.

Step 5: changeColor context exits the stack

Finally, when the browser window closes, the global context is popped.

Note: Encountering a return statement inside a function immediately terminates the current execution context, causing it to be popped from the stack.

Overall Process

Key takeaways after understanding this process:

JavaScript runs on a single thread.

Execution is synchronous; only the top‑most context runs while others wait.

There is exactly one global context, which exits when the browser closes.

The number of function execution contexts is unlimited.

Each function call creates a new context, even recursive calls.

Closure Example

To reinforce the concept, consider a simple closure example illustrated below.

In this case, the inner function f2 is defined inside f1 but not called during f1 's execution, so no new context is created for f2 at that time. Only when result invokes f2 does a new execution context appear, as shown in the following diagram.