JavaScript Execution Context and Call Stack Explained for Beginners

When JavaScript runs, it doesn’t just read code line by line without structure. Behind the scenes, the JavaScript engine creates environments to manage how code is executed. These environments are called execution contexts, and they are organized using the call stack.

For beginners, understanding these concepts is crucial because they explain why code behaves the way it does once you know how execution context and the call stack work, debugging errors and writing better programs become much easier.

What You’ll Learn

• What execution context means in JavaScript.
• The different types of execution context.
• The two main phases inside an execution context.
• How the call stack manages function execution.
• A simple example showing execution context and call stack in action.

What Is Execution Context?

An execution context is the environment in which JavaScript code is evaluated and executed. It decides which variables, functions, and objects are accessible at a given time.

There are three main types of execution context:

1. Global Execution Context (GEC): Created when JavaScript starts running. It represents the global scope, where global variables and functions live. In browsers, it’s tied to the window object.
2. Function Execution Context (FEC): Every time you call a function, JavaScript creates a new execution context for that function. It keeps track of the function’s local variables, parameters, and scope.
3. Eval Execution Context: Created when code runs inside the eval() function. It is rarely used and not recommended in modern code.

The Phases of Execution Context

Each execution context goes through two main phases:

1. Creation Phase: The engine allocates memory for variables and functions. Variables declared with var are hoisted and initialized with undefined, while let and const are hoisted but stay in a temporal dead zone. Function declarations are stored fully in memory.
2. Execution Phase: The code is executed line by line. Variables are assigned values, and functions execute when called.

What Is the Call Stack?

The call stack is a structure that helps the JavaScript engine keep track of execution contexts. It works on the principle of Last In, First Out (LIFO), just like stacking and removing plates.

Here’s how it works step by step:

• The global execution context is created and pushed onto the stack when the program starts.
• Each time a function is called, a new function execution context is created and pushed on top of the stack.
• When the function finishes, its context is popped off the stack, and control goes back to the previous context.

Example

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

How it runs:

• The global execution context is created.
• first() is called, so its execution context is pushed on the stack.
• Inside first(), second() is called, and a new execution context is added to the stack.
• second() finishes, so its context is removed.
• The engine continues with first(), then removes it when done.
• Finally, only the global execution context remains.

Conclusion

Execution context and the call stack are the foundation of how JavaScript runs your code. The execution context defines the environment for variables and functions, while the call stack manages the order in which these contexts are created and removed.

At first, these ideas may feel abstract, but they explain why your code executes in a certain way. By practicing with small examples, you’ll see that execution context and the call stack are not as complicated as they seem. With this understanding, you’ll be able to write cleaner code and debug more effectively, which is an important step in becoming a confident JavaScript developer.

You can reach out to me via LinkedIn