JavaScript Hoisting: Syntax, Usage, and Examples

JavaScript hoisting moves variable and function declarations to the top of their scope before execution. This means you can use functions and variables before declaring them in your code. However, their behavior depends on whether they use var, let, const, or function expressions.

How Hoisting Works in JavaScript

Hoisting lifts only declarations, not assignments. When you declare a variable with var, JavaScript hoists it and assigns it undefined. But if you use let or const, JavaScript hoists them without initializing them, which leads to a temporal dead zone error if accessed too soon.

Variable Hoisting with var

JavaScript hoists var variables to the top of their scope but does not assign them a value until execution reaches the declaration.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

Even though a is declared later, JavaScript moves the declaration (var a;) to the top but leaves the assignment (a = 10;) where it is. That’s why console.log(a); first prints undefined.

Function Hoisting

Function declarations get fully hoisted. That means you can call them before they appear in your code.

greet(); // "Hello!"

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

Since function declarations move to the top of the scope, JavaScript executes greet() without errors.

When to Use Hoisting in JavaScript

Hoisting is automatic, but knowing how it works helps you avoid common mistakes. It’s useful when:

1. You want to organize functions logically but call them earlier in the script.
2. You need to understand why let and const behave differently from var.
3. You want to avoid issues caused by accessing variables before initialization.

Examples of Hoisting in JavaScript

Hoisting with let and const

Unlike var, let and const are hoisted but remain uninitialized. If you try to use them before declaration, JavaScript throws an error.

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

Here, let x moves to the top of the scope, but JavaScript doesn’t assign a value until it reaches the declaration. That’s why accessing x before declaration results in an error.

Function Expressions and Hoisting

Function expressions don’t get hoisted the same way as function declarations.

sayHello(); // TypeError: sayHello is not a function

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

JavaScript hoists sayHello, but only as a variable. The actual function assignment happens later, so calling sayHello() before assignment causes an error.

Arrow Functions and Hoisting

Arrow functions behave like function expressions. They are not hoisted like function declarations.

arrowFunc(); // TypeError: arrowFunc is not a function

var arrowFunc = () => console.log("Arrow function!");

JavaScript hoists arrowFunc, but it only assigns undefined to it until execution reaches the assignment.

Learn More About JavaScript Hoisting

Hoisting Example with var

Remember, JavaScript hoists only declarations, not assignments.

console.log(num); // undefined
var num = 20;
console.log(num); // 20

Even though num is declared later, JavaScript hoists it and assigns undefined, which is why the first console.log(num); prints undefined.

Function Hoisting in Different Scopes

If you declare a function inside a block (if, for, etc.), its behavior depends on the environment.

if (true) {
  function test() {
    console.log("Test function");
  }
}

test(); // Works in some environments, but not all

Some browsers hoist block-scoped function declarations, while others don’t. To avoid this inconsistency, use function expressions inside blocks.

Hoisting with const

const variables are also hoisted but remain in the temporal dead zone until JavaScript reaches the declaration.

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

Unlike var, const variables don’t get an automatic undefined value. Instead, they stay in a restricted state and cause an error if accessed too soon.

Scope Hoisting in JavaScript

Scope hoisting is a technique used by JavaScript bundlers (like Webpack) to reduce redundant function calls and optimize execution.

import { sum } from "./math.js"; // Hoisted in module bundlers
console.log(sum(2, 3));

Modern JavaScript bundlers use scope hoisting to inline small functions, improving performance.

JavaScript hoists variable and function declarations to the top of their scope, but it does not hoist assignments. If you use var, JavaScript assigns undefined to the variable before reaching its declaration. let and const are hoisted but remain uninitialized until the declaration is encountered, leading to temporal dead zone errors if accessed early. Function declarations are fully hoisted, but function expressions (including arrow functions) are not.