What is Hoisting in JavaScript?

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means you can use functions and variables before you actually declare them in the code — but only under certain conditions.

Variable Hoisting

Consider this example:

console.log(x); // undefined
var x = 5;

Behind the scenes, JavaScript interprets it like this:

var x;
console.log(x); // undefined
x = 5;

Only the declaration is hoisted, not the initialization.

Let and Const Are Not Fully Hoisted

Variables declared with let and const are also hoisted, but they are not initialized. They remain in a “temporal dead zone” from the start of the block until the declaration is encountered.

console.log(a); // ReferenceError
let a = 10;

Function Hoisting

Function declarations are fully hoisted. You can call them before their declaration:

sayHello();

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

But this does not work with function expressions:

sayHi(); // TypeError

var sayHi = function() {
  console.log("Hi!");
};

Why Does Hoisting Matter?

Understanding hoisting helps you write more predictable and bug-free code. If you’re not aware of it, you might run into unexpected errors or behaviors — especially with var.

Best Practices

• Declare all variables at the top of their scope.
• Prefer let and const over var.
• Declare functions before you call them, even if JavaScript allows otherwise.