Hoisting

Syntax

// Declarations are processed before code runs

Examples

sayHello(); // works! "Hello!"

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

console.log(x); // undefined - var is hoisted with a default value
var x = 5;

try {
  console.log(y); // ReferenceError - in the temporal dead zone
  let y = 10;
} catch (e) {
  console.log(e.message);
}

try {
  sayHi(); // TypeError - sayHi is undefined at this point, not a function yet
  var sayHi = function() {
    console.log("Hi!");
  };
} catch (e) {
  console.log(e.message);
}

Best practices

• Do not rely on hoisting to call functions before their definition, even though it works for declarations - write code in logical, top-to-bottom order for readability
• Use let and const instead of var to avoid the confusing undefined-hoisting behavior entirely
• Understand the temporal dead zone as the reason `ReferenceError` sometimes appears for variables that are technically declared later in the same scope
• Declare all variables at the point where they are actually needed rather than depending on hoisting behavior

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation