JS Hoisting

Hoisting is JavaScript's habit of noticing your names before running the code, like reading the guest list before the party begins. Some names are ready to use early, and others are not.

In this page:

What Is Hoisting?
var Hoisting
let and const
Function Hoisting
Best Practices

Syntax

javascript

functionName();  // works: declarations are hoisted

function functionName() { }

console.log(variable);  // undefined: var is hoisted
var variable = value;

What Is Hoisting?

Hoisting means JavaScript processes declarations before running the code. The behavior depends on the declaration type.

Understanding hoisting matters because it explains why some code that looks like it should fail with a ReferenceError actually runs (just with unexpected values).

उदाहरण: What Is Hoisting?

javascript

console.log(typeof laterFunction); // "function" - hoisted
function laterFunction() {}

var Hoisting

A var declaration is hoisted and starts with the value undefined until its assignment runs.

Because of this, reading a var-declared variable before its assignment line gives undefined rather than an error, which can mask bugs where you forgot to initialize it.

उदाहरण: var Hoisting

javascript

console.log(x); // undefined, not an error
var x = 5;

let and const

let and const are hoisted too, but they stay in the temporal dead zone until their declaration is reached.

Accessing a let/const variable before its declaration line throws a ReferenceError rather than returning undefined, which is why this in-between state is called the temporal dead zone.

उदाहरण: let and const

javascript

try {
  console.log(y); // ReferenceError: temporal dead zone
} catch (e) {
  console.log(e.message);
}
let y = 5;

Function Hoisting

Function declarations can be called before their declaration. Function expressions do not work the same way.

This means you can organize helper function declarations below where they're used for readability, while function expressions assigned to a variable follow normal variable hoisting rules instead.

उदाहरण: Function Hoisting

javascript

sayHi(); // works, function declarations are fully hoisted
function sayHi() {
  console.log("Hi!");
}
// sayBye(); // TypeError, sayBye is undefined here
var sayBye = function () { console.log("Bye"); };

Best Practices

Declare variables before using them. This makes code easier to read and avoids confusing hoisting behavior.

Modern linters flag use-before-declaration automatically, which is one more reason relying on hoisting rather than declaring variables up front is considered poor practice.

उदाहरण: Best Practices

javascript

// Best practice: declare before use
let total = 0;
total = total + 5;
console.log(total);

Live Example

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson JS Closures Next Lesson → JS this Keyword

JS Hoisting

What Is Hoisting?

var Hoisting

let and const

Function Hoisting

Best Practices

Chapter Quiz — Complete all 8 topics to unlock

Login to run this code