Episode 2: How JavaScript Code is executed?

When JavaScript runs your code, it doesn’t just start reading from the top and go all the way down.
It actually creates something called an Execution Context, which is like a special environment where your code lives and runs.

There are two types of execution contexts:

Global Execution Context (GEC) — created when the program starts.

Function Execution Context (FEC) — created each time a function is called.

Each execution context has two phases:
🧠 1. Memory Creation Phase (Creation Phase)

Before JavaScript executes your code, it scans the file and stores all variables and functions in memory.

Variables are set to undefined.

Functions are stored as they are (actual function code).

Think of it like setting up chairs before guests arrive at a party — everything is prepared for later use.

▶️ 2. Code Execution Phase

Now JavaScript executes code line by line.
Variables get their actual values.
Functions run when they are called.
Every time a function runs, a new execution context is created.
After a function finishes running:
It returns control to where it was called.
Its execution context is deleted.

📚 How the Call Stack Works

JavaScript uses a call stack to manage all running execution contexts.

The top of the stack is always the code being executed right now.
The bottom is always the Global Execution Context.
Whenever a function is called:
A new Function Execution Context is created.
It is pushed onto the stack.
When the function finishes:
Its context is popped off the stack.

🧩 Real-Life Example: Making a Sandwich 🥪

Imagine you’re making a sandwich.
Global Context = Your Kitchen
This is the main environment where everything starts.
Function Context = Each Task

Every time you perform a task (like cutting veggies or spreading butter), you temporarily focus on that task.

🧪 JavaScript Example

`var bread = "Brown Bread";

function makeSandwich() {
console.log("Start making sandwich");

function addButter() {
console.log("Adding butter");
}

addButter();
console.log("Sandwich is ready");
}

makeSandwich();`

🔍 What Happens Step-by-Step?

1. Global Memory Creation Phase

JavaScript sets up memory:

bread → undefined
makeSandwich → function

1. Global Code Execution

bread = "Brown Bread"

makeSandwich() is called → a new Function Execution Context is created.

🍞 Inside makeSandwich() Execution Context
Memory Phase
addButter → function

Execution Phase

Print: "Start making sandwich"
Call addButter() → new execution context!

🧈 Inside addButter() Execution Context
Memory Phase

(no variables declared)
Execution Phase
Print: "Adding butter"
Execution context ends → popped off the stack
Back to makeSandwich()
Print: "Sandwich is ready"

Execution context ends → popped off the stack

Back to Global Context
After all code is done:
Global Execution Context is removed. Program finishes.

🎉 Final Thoughts

Execution Context and Call Stack may sound complicated, but they simply describe how JavaScript prepares and runs your code.

If you remember:

Memory Phase → setting things up
Execution Phase → running the code
Call Stack → managing what runs when
…you’ll understand how JavaScript actually works behind the scenes!