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
andgreeting
.name
variable is assigned a special valueundefined
.
Execution Phase:
name
is assigned the value"Akanksha"
.greeting
becomes"Hello, Akanksha"
.console.log(greeting)
printsHello, 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. 🎭🚀
Subscribe to my newsletter
Read articles from Ashiya Amanulla directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
