Introduction
JavaScript might seem straightforward, but its behavior—especially with hoisting, scope, closures, and this—often confuses developers. Understanding the execution context is the key to demystifying these quirks. Rather than memorizing definitions, we’ll visualize and break down what actually happens under the hood when your JavaScript code runs.
What is an Execution Context?
An execution context in JavaScript is an environment where the code is evaluated and executed. It contains all the information needed to run your code properly—variables, function references, and where to look for them. Simply put:
Every piece of JavaScript code runs inside an execution context. MDN Web Docs
There are two main stages in JavaScript execution:
- Compiling Phase – Code is scanned, parsed, and prepared.
- Execution Phase – Code runs line by line.
JavaScript Execution Model Visualized
How Compiling vs Execution Works
1. Compiling Phase
- The JS engine scans your code.
- It creates the execution context.
- Variable declarations become part of a structure known as the variable environment, initialized with
undefined.
🔹 Example:
var apple;
During compilation, apple is noted in memory with an initial value of undefined.
2. Execution Phase
- Code runs from top to bottom.
- Variables get real values assigned.
- Functions are called.
🔹 Example:
apple = 10; console.log(apple); // 10
The engine updates the environment as it executes.
Why Hoisting Happens
Hoisting is often misunderstood. People think variables are magically moved to the top of the file—but that isn’t the case. Instead:
✅ Variable declarations are created in memory first (compiling).
❌ Assignments happen later, when the code actually runs.
That’s why this logs undefined instead of an error:
console.log(apple); // undefined var apple = 10;
Because the variable was already declared (with a value undefined) before execution.
Functions and Hoisting
Functions can behave differently:
- Function declarations are fully available from the start.
- Function expressions are treated like variables and only get assigned during execution.
Example:
console.log(showNumber()); // "Hey, show a number"
console.log(showName()); // TypeError: showName is not a function
function showNumber() { return "Hey, show a number"; }
var showName = function() {};
The first function is fully hoisted, the second gets undefined until the execution phase.
Special Cases in Execution Context
✔ Naming Conflicts
If a function and a variable share a name, the function wins during compiling.
✔ Variables Inside Conditional Blocks
Declarations inside blocks (even unreachable ones) get recorded in the compiling phase.
Key Takeaways
| Concept | What Happens |
|---|---|
| Execution Context | Created before code runs |
| Compiling Phase | Declarations stored (JS sets up variables + functions) |
| Execution Phase | Assigns values + executes statements |
| Hoisting | The declaration happens first, the assignment later |
| Function declarations | Fully hoisted |
| Function expressions | Treated like variables |
Next Steps
In Part 2, we’ll explore the call stack and how multiple execution contexts stack and interact when functions call functions.
Conclusion
Understanding how JavaScript moves from code text to running logic—the execution context lifecycle—is essential. It explains why your variables log weird values, how hoisting works, and why your functions behave the way they do under the hood. Once this “magic” is demystified, debugging and writing stable JavaScript become much easier.
External Resources & Further Reading
🔗 MDN Web Docs: Glossary – Hoisting
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting Medium
🔗 MDN Web Docs: JavaScript Execution Model
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model MDN Web Docs
FAQ
Q: What is the difference between the compiling and execution phase?
➤ Compiling sets up memory and declarations, while execution actually runs the code line by line.
Q: Is hoisting real?
➤ Technically, variables aren’t moved; the engine sets them up before running code.