Hoisting is one of the most misunderstood concepts in JavaScript. Many developers think JavaScript “moves variables and functions to the top of the file.” That explanation is convenient—but technically wrong.
In this article, we’ll break down what actually happens under the hood, why var, let, and const behave differently, and how the Temporal Dead Zone (TDZ) fits into the picture.
The Global Execution Context
When a JavaScript program starts, the engine creates a Global Execution Context (GEC).
The GEC is created in two phases:
Creation Phase
Execution Phase
Understanding hoisting starts with the creation phase.
What Happens in the Creation Phase?
During the creation phase, JavaScript does the following:
This memory allocation step is what we call hoisting.
Variable Hoisting
var Variables
Memory is allocated during the creation phase
Automatically initialized with undefined
Can be accessed before declaration (value will be undefined)
console.log(a);
var a = 10;
This behavior is why var is considered unsafe in many scenarios.
let and const Variables
Memory is allocated during the creation phase
They are not initialized
They remain in the Temporal Dead Zone (TDZ)
Accessing them before declaration results in a ReferenceError
Important: let and const are hoisted, but they are not initialized.
Understanding the Temporal Dead Zone (TDZ)
The Temporal Dead Zone is one of the most confusing parts of JavaScript.
Once the declaration line runs, the TDZ ends.
{
let name;
name = "tapaScript"
console.log(name);
}
For const, initialization must happen at the declaration line, otherwise JavaScript throws an error.
Function Hoisting
Function Declarations
greet();
function greet() {
console.log("Hello");
}
This is known as full hoisting.
Function Expressions
Function expressions behave like variables.
Hoisting depends on how they are declared (var, let, const)
They are not callable before initialization
sayHi();
var sayHi = function () {
console.log("Hi");
};
Execution Phase
After the creation phase finishes:
JavaScript enters the execution phase
Code runs line by line
Variable assignments happen here
Function calls are executed here
So, What Is Hoisting Really?
❌ Hoisting is not JavaScript moving code to the top
✅ Hoisting is memory allocation before execution
Nothing is physically moved in your source code.