How let and const Are Hoisted in JavaScript
let and const ARE hoisted, just differently from var. Here is what happens in the memory phase.
How let and const Are Hoisted in JavaScript
A common misconception is that let and const are "not hoisted." They are hoisted, but they are not initialized. This is the TDZ.
What "Hoisted" Means
Hoisting is the act of allocating memory for a declaration during the memory allocation phase of execution context creation. All declarations (var, let, const, function, class) are hoisted.
How var Is Hoisted
console.log(x); // undefined var x = 5; `` `var x` is hoisted and **initialized** to `undefined`. So accessing it early returns `undefined`. ### How `let` and `const` Are Hoisted ```js console.log(y); // ReferenceError: Cannot access 'y' before initialization let y = 5; `` `let y` is hoisted (memory is allocated), but it is **not initialized**. It sits in the TDZ until the `let y = 5` line. Accessing it before that line throws. ### Evidence That They Are Hoisted If `let` were not hoisted at all, this would work: ```js let x = 1; { console.log(x); // ReferenceError (TDZ), not 1 let x = 2; } `` But it throws `ReferenceError` because the inner `let x` is hoisted (shadowing the outer `x`) and is in the TDZ. If it were not hoisted, the outer `x` would be found. The fact that the inner `x` shadows the outer one from the start of the block proves it is hoisted. ### The Difference Is Initialization - `var`: hoisted AND initialized to `undefined`. - `let`/`const`: hoisted but NOT initialized (TDZ until the declaration line). - `function` declarations: hoisted AND initialized with the full body. - `class` declarations: hoisted but NOT initialized (TDZ). ### Why the Distinction Matters - `var`'s early initialization is "forgiving" but causes bugs (silent `undefined`). - `let`/`const`'s TDZ is "strict" and catches bugs early (clear `ReferenceError`). ### The Takeaway `let` and `const` ARE hoisted (memory is allocated), but they are NOT initialized. They sit in the TDZ until the declaration line. `var` is hoisted AND initialized to `undefined`. The difference is initialization, not hoisting itself.
Yes, memory is allocated for them during the memory allocation phase. But unlike var, they are not initialized to undefined. They sit in the Temporal Dead Zone until the declaration line, and accessing them early throws ReferenceError.
var is hoisted AND initialized to undefined, so it is usable early (returns undefined). let and const are hoisted (memory allocated) but NOT initialized, so they sit in the TDZ and throw ReferenceError if accessed early.
Because an inner let with the same name as an outer variable shadows the outer from the start of the block. If it were not hoisted, the outer would be found. The fact that it throws proves the inner let is hoisted and in the TDZ.
Yes, but like let and const, they are hoisted without initialization. They sit in the TDZ until the declaration line. Accessing a class before its line throws ReferenceError.
var is initialized to undefined during the memory phase, so it has a usable value. let and const are not initialized until the declaration line, so the gap (TDZ) has no usable value and throws ReferenceError to force declare-before-use.
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.