JavaScript Execution Context and Call Stack Explained

Why Execution Context is important in JavaScript ?

When I first learnt JavaScript, I tried to memorize syntax but struggled to understand why the code behaved the way it did.

What are all these jargons like : Hoisting, Scope, Closure, async behavior ?

All became easy once I understood Execution Context & Call stack.

So, this is where my JavaScript learning journey begins, and from today onwards, I will be sharing my learning so that it can be easy for you all to learn these concepts.

Let’s start with the very first question.

What is Execution Context?

An Execution context is the environment where JavaScript code is evaluated and executed.

What does it mean by this line? Let me explain.

Think of it as a big container created by JS to run your code. Everything in JS runs inside an execution context. Every time JS runs code, it creates an execution context.

What is inside an execution context?

The execution context is created in two phases.

1. Memory Creation Phase
2. Code Execution Phase

Phase 1 - Memory Creation Phase :

Before executing the code, JS stores variables and functions in the memory.

During this phase :

• In the memory component everything is stored in key-value pairs.
• Variables are stored with a special keyword “undefined“ (I will talk about it in another blog).
• Functions are stored as it is.

Phase 2 - Code Execution Phase :

In this phase :

• Code will be executed one line at a time.
• Variable values are updated with the values written in the code.
• Functions are invoked/executed in this phase.
• Function calls are pushed onto the Call Stack.

This is also known as Thread of Execution. This is why JavaScript is called Synchronous Single Threaded language.

What does it mean by Synchronous Single Threaded ?

It means the code will execute one line at a time in a particular order that is, after finishing the execution of one line, the next line will executes.

Types of Execution Context

1. Global Execution Context :

• It is created when JS file first runs.
• Only one global context exists.

1. Function Execution Context :

• It is created every time a function is called.
• Can be as many as functions are invoked in the code.
• When a function is created, a new execution context is created.

Example to Visualize Execution Context

Let’s understand the flow of execution context with an example

In the memory creation phase, variable n will be stored with undefined. and function will be stored as it is and everything is stored in key-value pairs. We can see this in developer console.

In code execution phase a global execution is created and variables will assigned with its value written in the code. The code will execute one line by line at a time in a particular order.

So, n is assigned with value 5.

Now when the 6th line is executed, the multiplyByTwo() function is invoked with an argument n and a new execution context is created and pushed into the Call Stack.

This is known as Function Execution Context. Once the code execution is completed and the value is assigned into output1, the execution context is popped from the call stack.

Similarly for output2, the same process happens.

What Is the Call Stack?

The Call Stack is a data structure that keeps track of execution contexts. It follows LIFO - Last In, First Out principle.

JavaScript has it own call stack. Call stack maintains the order of the execution of execution context. It is also known as Execution Context Stack / Program Stack / Central Stack / Runtime Stack / Machine Stack.

How Call Stack Works

The order of the call stack is as below :

1. Global - First, the code executes and global execution context is created.
2. first() - After this, first() function is invoked and and execution context pushed onto call stack.
3. second() - Then second function is invoked inside first() and and execution context pushed onto call stack.
4. third()- Then third function is invoked inside second() and and execution context pushed onto call stack.

Once the third() finishes, it popped from call stack. Then second() and first() finish execution and popped from the call stack as well.

Importance

Understanding execution context helps you:

• Predict hoisting behavior
• Debug scope issues
• Understand closures
• Avoid call stack overflow
• Write better async code

Finally, Execution Context & Call Stack are the foundation of JavaScript. Once you understand this:

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

If You like my content and want to connect with me, follow me on LinkedIn(https://www.linkedin.com/in/amohanta).