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.