#   🧠 How JavaScript Program Executes Behind the Scenes

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?

![](https://cloudmate-test.s3.us-east-1.amazonaws.com/uploads/covers/695252f9d6df54dba55a5b5a/2d8222dc-ef90-4d71-b48b-6f7d0a8fc47b.jpg align="center")

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)

![](https://cloudmate-test.s3.us-east-1.amazonaws.com/uploads/covers/695252f9d6df54dba55a5b5a/f03fb2e8-23a6-4231-b02b-25543e08cb6a.jpg align="center")

The above diagram shows how JavaScript executes the following code:

```plaintext
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:

```plaintext
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:

```plaintext
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:

```plaintext
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:

```plaintext
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.**