Skip to main content

Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope during the creation phase.

Variable Hoisting​

var — Hoisted & initialized to undefined​

script.js
console.log(a); // undefined (not ReferenceError)
var a = 10;
console.log(a); // 10

let / const — Hoisted but NOT initialized (TDZ)​

script.js
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

The time between entering the scope and the declaration is called the Temporal Dead Zone (TDZ).

script.js
{
  // TDZ starts
  console.log(x); // ReferenceError
  let x = 5;      // TDZ ends
}

Function Hoisting​

Function Declarations — Fully hoisted​

script.js
greet(); // "Hello!" — works because the entire function is hoisted

function greet() {
  console.log("Hello!");
}

Function Expressions — NOT hoisted​

script.js
greet(); // TypeError: greet is not a function

var greet = function () {
  console.log("Hello!");
};
// 'greet' is hoisted as undefined (var), but the function assignment is NOT

Arrow Functions — Same as expressions​

script.js
greet(); // TypeError: greet is not a function

var greet = () => console.log("Hello!");

Summary Table​

DeclarationHoisted?Initialized?TDZ?
var✅undefined❌
let✅❌✅
const✅❌✅
Function Declaration✅Full body❌
Function Expression (var)✅undefined❌
Arrow Function (const)✅❌✅

Key Takeaways​

  • All declarations are hoisted, but only var and function declarations are initialized.
  • let and const have a Temporal Dead Zone — you can't use them before their declaration.
  • Function declarations are hoisted with their body; function expressions are not.
  • To avoid confusion, declare variables at the top of their scope.