Learn the concept
Hoisting
Hoisting moves variable and function declarations to the top of their scope during compilation. var declarations are initialized as undefined, while let/const enter a Temporal Dead Zone until their declaration is reached.
Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before code execution.
Function Declarations:
var:
undefinedundefinedlet and const:
ReferenceErrorFunction Expressions and Arrow Functions:
// Function declarations are fully hoisted
sayHello(); // 'Hello!' — works fine
function sayHello() {
console.log('Hello!');
}
// var is hoisted as undefined
console.log(x); // undefined (not an error)
var x = 5;
// let/const enter the Temporal Dead Zone
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
// Function expressions follow variable rules
console.log(greet); // undefined (var hoisted)
greet(); // TypeError: greet is not a function
var greet = function() {
console.log('Hi!');
};Understanding var hoisting bugs when maintaining older JavaScript codebases that predate ES6
Spotting subtle hoisting-related bugs during code reviews, especially with var declarations inside loops or conditionals
Understanding why a variable is undefined instead of throwing a ReferenceError when accessed before its assignment
Build a game showing code snippets and asking users to predict the output based on hoisting rules
Build a tool that shows step-by-step how the JS engine hoists declarations before executing code