Before understanding Call Stack, Memory, and Execution Context, we need to understand one fundamental thing:

👉 Every program needs memory to run.

When a JavaScript program runs:

• It needs memory to store variables and functions.

• It needs a place to execute code line by line.

• It needs a mechanism to manage function calls.

JavaScript does this using something called:

Execution Context.

📌 What is Execution Context?

An Execution Context is the environment in which JavaScript code is evaluated and executed.

Whenever JavaScript runs code, it creates an execution context.

There are mainly two types:

• Global Execution Context (GEC)

• Function Execution Context (FEC)

🌍 1. Global Execution Context (GEC)

What is it?

The Global Execution Context is created:

• When the JavaScript file first loads.

• Before any code starts executing.

It is the default context where your entire program begins.

There is only one Global Execution Context per program.

🔁 2. Function Execution Context (FEC)

Now let’s talk about what happens when a function is called.

Whenever a function is invoked:

👉 A new Execution Context is created for that function.

This is called:

Function Execution Context (FEC)

Each time a function runs, it gets its own separate execution environment.

What Does Each Execution Context Contain?

Each Execution Context has:

• Lexical Environment:
  It contains the variable environment and a reference to the outer environment (this forms the scope chain).

• this:
  The value of this is determined depending on how the function is called.

• Some internal metaData:
  Internal engine-level information needed to manage execution.

⚠️ Important Note

Always keep in mind:

Heap is not a part of the Execution Context.

Execution Context contains a Variable Environment, and that variable environment may hold references to non-primitive data stored in the Heap.

In simple terms:

• Execution Context lives in the Call Stack.

• Objects and complex data live in the Heap.

• Variables inside the Execution Context may point to memory in the Heap.

Understanding the Diagram (Call Stack + Heap + Execution Context)

The above diagram shows how JavaScript executes the following code:

var a = 5;

function f1(){
  let b = 6;
  console.log(a);
  console.log(b);
}

f1();

---

1️⃣ Global Execution Context (Bottom of Call Stack)

When the program starts:

• The Global Execution Context (GEC) is created.

• It is pushed into the Call Stack.

Inside Global Execution Context:

• a → 5

• f1 → reference to function (stored in Heap)

• Outer reference → null

Important:

👉 The actual function object is stored in the Heap.

👉 The Global Execution Context only stores a reference to it.

2️⃣ Heap (Right Side)

The Heap stores:

• The actual f1 function code.

• Any non-primitive data (objects, arrays, functions).

So:

• f1 in Global EC → holds a reference

• Real function definition → lives in Heap

Execution Context does NOT store function body directly — it stores reference.

3️⃣ Function Call → New Execution Context

When f1() runs:

• A Function Execution Context (FEC) is created.

• It is pushed on top of the Call Stack.

Now Call Stack looks like:

Function Execution Context (f1)
Global Execution Context

4️⃣ Inside Function Execution Context

Inside FEC:

• b → 6

• Outer Reference → points to Global Execution Context

• this is set (depends on call)

Now when:

console.log(a);

JavaScript searches:

1. Inside FEC → not found

2. Goes to Outer Reference (Global EC) → finds a = 5

This is the Scope Chain.

Then:

console.log(b);

It finds b inside FEC.

5️⃣ Function Finishes

After execution:

• Function Execution Context is popped from the Call Stack.

• Only Global Execution Context remains.

Stack becomes:

Global Execution Context

---

What This Diagram Shows Clearly

• Call Stack manages Execution Contexts.

• Each function call creates a new Execution Context.

• Execution Context contains variables and references.

• Heap stores actual objects and function definitions.

• Scope chain works using Outer Environment Reference.

✨ Conclusion

Now you’ve seen how JavaScript doesn’t simply execute code line by line.
It creates Execution Contexts, manages memory using the Call Stack, stores complex data in the Heap, and uses the scope chain to resolve variables.

Understanding Global Execution Context, Function Execution Context, and how they interact with the Call Stack and Heap gives you a much deeper clarity of how JavaScript truly works behind the scenes.

I hope this blog helps you understand how JavaScript programs execute behind the scenes.