Understanding Execution Context & the Call Stack – JavaScript Deep Dive

🚀 Introduction

Have you ever wondered what really happens when your JavaScript code runs?

When you write a function and call it — how does JavaScript know what to execute, in what order, and where to return after a function ends?

The answer lies in two core concepts:

✅ Execution Context

✅ Call Stack

Let’s break them down with visual examples and relatable metaphors.

🔍 What is Execution Context?

An execution context is an environment where JavaScript code is evaluated and executed.

There are three main types:

1. Global Execution Context (GEC)

• Created by default when your script starts.
• this refers to the window object in browsers.

1. Function Execution Context (FEC)

• Created whenever a function is called.
• Has its own this, arguments, variables, and scope.

3.Eval Execution Context (rarely used)

• Created inside the eval() function (avoid using this in practice).

🧱 Inside an Execution Context
Each execution context has two phases:

• Creation Phase
• Sets up memory space for variables and functions.
• var is hoisted with undefined, functions are hoisted completely.
• Execution Phase
• Code is executed line by line.

🧰 Example:

• Global Execution Context is created.
• Function greet() is hoisted.
• Then greet() is invoked, creating a new Function Execution Context.
• It runs, logs the output, and is removed from memory.

🧵 What is the Call Stack?

• The Call Stack is like a stack of plates.
• When a function is called, it’s pushed onto the stack.
• When it finishes, it’s popped off.
• This stack helps JavaScript keep track of where it is in the program — especially when there are multiple nested function calls.

🧪 Call Stack Example

⚠️ Call Stack Overflow

🧑‍🏫 Summary

• JavaScript runs inside Execution Contexts.
• The Call Stack keeps track of function calls.
• Understanding this is key to debugging and mastering asynchronous code (coming in Day 3!)

✅ Conclusion

Understanding the Execution Context and the Call Stack is like knowing the brain of JavaScript. It tells you:

• Where your code is executed
• How functions are managed
• Why errors like “stack overflow” happen
• And how JavaScript handles synchronous flow

✍️ Written By
Chaitanya Chopde

🌟 Inspired By
@devsyncin