JS - Execution Context (BTS)

Ever wondered what actually happens when your JavaScript code runs? It's like magic - but there's a whole system working behind the curtain to make it all happen. In this post, we’re going to understand what goes on behind the scenes when JavaScript does its thing.

🚀 JavaScript: How It Works

Everything in JavaScript runs inside something called an Execution Context. Each context goes through two main phases:

📌 1. Creation Phase (Memory Component / Variable Environment)

• The JavaScript engine scans the code from top to bottom.

• It allocates memory for all variables and functions.

• Variables are assigned a temporary value of undefined whereas functions are hoisted — meaning their full definitions are stored in memory.

📌2. Execution Phase (Code Component / Thread of Execution)

• The code is now executed line by line.

• Variable values are updated with the value given and functions are invoked.

• The call stack is used to manage the order of execution.

🔍 Example: Understanding Execution Context

function sayHello(name) {
  var greeting = "Hello, " + name;
  console.log(greeting);
}

sayHello("Akanksha");             //Hello, Akanksha

🧠 What Happens Behind the Scenes (Step-by-Step):

1. Global Execution Context is Created

• This is the default context where the entire code runs.

• The function sayHello is hoisted — it's stored in memory.

• No code is executed yet — this phase is just for memory setup.

2. Global Code Starts Running

• The engine reaches sayHello("Akanksha");.

• A new Execution Context is created specifically for the sayHello function.

3. Function : sayHello Execution Context

Creation Phase:

• Memory is allocated for name and greeting.

• name variable is assigned a special value undefined.

Execution Phase:

• name is assigned the value "Akanksha".

• greeting becomes "Hello, Akanksha".

• console.log(greeting) prints Hello, Akanksha to the console.

• When sayHello is called, its context is pushed onto the call stack.

• Once the function finishes running, it’s popped off the stack.

• The engine returns control to the Global Execution Context.

JavaScript as a Play

Imagine your JavaScript code as a stage play:

• 🎬 Global Context = The main stage is set, props are arranged, actors (functions) are introduced.

• 🧑‍🎤 Function Call = A scene starts — a new execution context comes alive.

• 🎤 Inside the scene: Local actors (variables) perform their actions (code execution).

• 🎭 When the scene ends, the curtain falls, and control goes back to the main stage.

Final Takeaway

The Execution Context and Call Stack are fundamental to how JavaScript operates under the hood. By visualizing JavaScript as a theater production—where each function plays a role on its own stage—you can demystify complex behaviors like hoisting, scope, and function execution.

Understanding these concepts will help you:

• Debug more effectively

• Avoid common pitfalls

• Write more predictable, maintainable code

So next time your code isn't behaving as expected, step back and ask:
Where am I in the execution context, and what's on the call stack?

Keep exploring, keep breaking things, and keep learning.
JavaScript is quirky, but once you understand its inner workings — it’s a lot more fun. 🎭🚀