Why JavaScript Hoists Variables and Functions
Hoisting is not a feature, it is a side effect. Here is the engine-level reason it happens.
Why JavaScript Hoists Variables and Functions
Hoisting is often explained as "the engine moves declarations to the top." That is a simplification. The real reason is the memory allocation phase of execution context creation.
The Real Mechanism
When the engine creates an execution context, it does two things:
- Memory Allocation Phase: Scan the code, allocate memory for every variable and function declaration, and initialize them.
- Code Execution Phase: Run the code line-by-line, assigning values and invoking functions.
Hoisting is what we call the side effect of step 1. The engine does not rearrange code. It just reserves memory before running anything.
Why Functions Are Stored Fully
Functions can be called from anywhere in the scope. If the engine waited to allocate memory for a function until its declaration line, a call earlier in the file would fail. Storing the full function body during the memory phase lets calls work in any order.
Why var Gets undefined
var was designed for loose, forgiving code. Returning undefined for a variable used before assignment lets the program continue instead of crashing. That was the pre-ES6 philosophy.
Why let and const Get the TDZ
ES6 introduced let and const to fix bugs caused by var's forgiveness. The TDZ makes accessing a variable before declaration an error, not a silent undefined. This catches bugs early.
Why This Design Matters
- Forward references: functions can call each other regardless of order, which is essential for modular code.
- Performance: scanning once for declarations is faster than allocating on each line.
- Predictability: the TDZ makes modern code safer than
var-based code.
What Hoisting Is Not
- It is not code movement. The engine does not edit your source.
- It is not a feature requested by developers. It is a side effect of how execution contexts are built.
- It is not the same for all declarations:
var,let,const, and function declarations each have different hoisting behavior.
The Takeaway
Hoisting exists because the engine allocates memory for all declarations before executing code. Functions are stored fully to allow forward references. var is set to undefined for forgiveness; let and const sit in the TDZ for safety. Understanding the memory phase makes hoisting predictable.
Because the engine allocates memory for all declarations during the memory allocation phase of execution context creation, before any code runs. This is a side effect, not a feature. It allows forward references and faster execution.
No. Hoisting is a mental model. The engine does not rearrange source code. It scans once for declarations, reserves memory, and then runs the code line-by-line.
So that functions can be called from anywhere in the scope, regardless of order. If the engine waited to store a function until its declaration line, calls earlier in the file would fail.
var was designed for loose, forgiving code (pre-ES6). let and const were introduced in ES6 to catch bugs early. The TDZ makes accessing a variable before declaration an error instead of silently returning undefined.
Partly. Scanning once for all declarations is faster than allocating on each line. But the primary reason for hoisting is to allow forward references, especially for functions.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.