JavaScript Tutorial
Hoisting moves declarations to the top of their scope during compilation.
Understanding how var, let, const, and functions behave prevents confusing runtime bugs.
Hoisting explains many interview questions and surprising behaviors in JavaScript.
Knowing TDZ and function hoisting leads to safer, more predictable code.
console.log(name); // undefined
var name = "Asha";
// let/const throw before declarationconsole.log(message); // undefined
var message = "Hello World";Declarations are hoisted, but assignments are not.
console.log(a); // undefined
var a = 1;
// console.log(b); // ReferenceError
let b = 2;var is initialized to undefined; let is in TDZ until declared.
Hoisting moves declarations to the top of their scope during compilation.
Only declarations are hoisted, not assignments, which explains many surprises.
Modern JavaScript uses let/const and TDZ to make hoisting safer and more predictable.
var is hoisted and initialized to undefined, so it can be read before assignment.
let and const are hoisted but inaccessible until declared (temporal dead zone).
const must be initialized immediately and cannot be reassigned.
Function declarations are fully hoisted, so you can call them before definition.
Function expressions follow variable hoisting rules and are not callable before assignment.
Using var in loops causes closure bugs; let fixes this by creating per-iteration bindings.
Accessing let/const before declaration throws ReferenceError because of TDZ.
Multiple function declarations with the same name overwrite earlier ones.
greet("World");
function greet(name) {
console.log("Hello, " + name + "!");
}Function declarations are fully hoisted.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log(j), 100);
}var shares one binding; let creates per-iteration bindings.
// sayHi(); // TypeError
var sayHi = function() {
console.log("Hi!");
};Function expressions are not hoisted with their implementation.
Without
// var hoisted
console.log(a);
var a = 1;With
// let in TDZ
// console.log(b);
let b = 1;Prefer let/const to avoid hoisting confusion.
Declare variables before use to avoid TDZ errors.
Only function declarations are fully hoisted.
Hoisting moves declarations to the top of scope during compilation.
let/const are in TDZ until declared; var is initialized to undefined.
No. Only function declarations are fully hoisted.
Practice: Predict the output and then run the code.
console.log(x);
var x = 10;
// console.log(y);
let y = 20;One Possible Solution
// Output:
// undefined
// ReferenceError for y if uncommentedHoisting moves declarations to the top of their scope during compilation.
It is the time before let/const declaration when the variable exists but cannot be accessed.
No. Only function declarations are hoisted with their body.
var is function-scoped and hoisted to undefined, which can cause bugs.
Run the basic hoisting example and observe the output.