Skip to content

Hoisting

This lesson explains Hoisting in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Hoisting Overview

JavaScript hoisting is the behavior where variable and function declarations are processed before code execution. This means some declarations appear to be moved to the top of their scope, even though the original code stays in the same place.

Hoisting affects var, let, const, function declarations, function expressions, classes, and imports in different ways. Understanding hoisting helps developers avoid ReferenceError, unexpected undefined values, and confusing execution order bugs.

Declaration Type Hoisted? Behavior
var Yes Hoisted and initialized with undefined.
let Yes Hoisted but not initialized before declaration.
const Yes Hoisted but not initialized before declaration.
Function Declaration Yes Can be called before declaration.
Function Expression Partially Variable is hoisted, function assignment is not.
Class Declaration Yes Hoisted but cannot be used before declaration.

JavaScript Hoisting Example

console.log(message);

var message = "Hello JavaScript";

sayHello();

function sayHello() {
  console.log("Function declaration is hoisted");
}

// console.log(userName);
// const userName = "John";

In this example, var message is hoisted and initialized as undefined, so the first output is undefined. The function declaration sayHello() is fully hoisted, so it can be called before it appears in the code.

Top 10 JavaScript Hoisting Examples

The following examples show common hoisting behavior with var, let, const, function declarations, function expressions, classes, and imports.

# Example Syntax
1 var Hoisting console.log(a); var a = 10;
2 let Temporal Dead Zone console.log(a); let a = 10;
3 const Temporal Dead Zone console.log(a); const a = 10;
4 Function Declaration sayHi(); function sayHi() { return "Hi"; }
5 Function Expression with var sayHi(); var sayHi = function() { return "Hi"; };
6 Function Expression with const sayHi(); const sayHi = function() { return "Hi"; };
7 Arrow Function Hoisting add(); const add = () => 1 + 2;
8 Class Declaration const user = new User(); class User { }
9 Block Scope Hoisting if (true) { console.log(x); let x = 1; }
10 Import Hoisting import { helper } from "./helper.js";

Best Practices

  • Declare variables before using them.
  • Use const by default and let only when reassignment is needed.
  • Avoid using var in modern JavaScript.
  • Place function declarations before the code that uses them for readability.
  • Do not call function expressions before they are assigned.
  • Declare classes before creating instances.
  • Keep variables close to where they are used.
  • Use linting tools to catch hoisting-related mistakes early.

Common Mistakes

  • Expecting var to behave like let or const.
  • Calling function expressions before assignment.
  • Using let or const before declaration.
  • Creating classes after trying to instantiate them.
  • Assuming all declarations behave the same way.
  • Confusing hoisting with moving code at runtime.
  • Ignoring the temporal dead zone for let and const.

Key Takeaways

  • Hoisting means declarations are processed before code execution.
  • var is hoisted and initialized with undefined.
  • let and const are hoisted but not initialized before declaration.
  • Function declarations are fully hoisted.
  • Function expressions and arrow functions are not callable before assignment.
  • Classes are hoisted but cannot be used before declaration.
  • Understanding hoisting helps avoid execution order bugs.

Pro Tip

The safest habit is simple: declare variables, functions, and classes before using them. This avoids hoisting confusion and makes your JavaScript easier to read, debug, and maintain.

You now understand JavaScript hoisting, including var, let, const, function declarations, function expressions, arrow functions, classes, temporal dead zone, best practices, and common mistakes. Continue to the next lesson to learn JavaScript Error Handling.