Hoisting in JavaScript

What is Hoisting?

Hoisting is a mechanism where variable and function declarations are interpreted as being at the beginning of their scope (function or global scope), regardless of where they're physically written in code. Only declarations are hoisted, initializations remain in place.

How Does it Work?

Function Declarations

Functions declared with the function keyword are fully hoisted, allowing you to call them before their actual declaration in code.

sayHello(); // "Hello from function declaration!"

function sayHello() {
  console.log("Hello from function declaration!");
}

Variables with var

Variables declared with var are also hoisted, but only their declaration, not initialization. Until the line where assignment occurs, the variable has value undefined.

console.log(a); // undefined, because var a declaration is hoisted, but initialization stays in place
var a = 10;
console.log(a); // 10

Variables with let and const

Variables declared with let and const are also hoisted but not initialized. They're in the so-called Temporal Dead Zone (TDZ) until the initialization line executes. Accessing them before initialization causes a ReferenceError.

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

// console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

Key Points

• Hoisting lifts only declarations, not values.

• Function declarations are fully available before their actual definition.

• Variables declared with var become available but have value undefined before initialization.

• Variables declared with let and const are in TDZ, preventing their use before initialization.

Recommendations

• Use let and const instead of var: They provide block scope and prevent many hoisting-related errors.

• Declare variables at the beginning of a block or function: This improves code readability and reduces error likelihood.

• Be mindful of code order: Remember that functions declared with function can be called before definition, but variables declared with let and const can't be used before initialization.