Hoisting in JavaScript: A Practical Guide

Discover what hoisting in JavaScript is, how declarations are moved to the top of their scope, and how to write safer code with var, let, and const.

JavaScripting Team

February 8, 2026·5 min read

Variables JS Functions Debugging Syntax

hoisting

Hoisting in JavaScript is the mechanism by which function and variable declarations are moved to the top of their containing scope during compilation, allowing references before declaration. Initializations may not occur for all bindings.

What is Hoisting in JavaScript?

Hoisting is the mechanism by which JavaScript moves declarations to the top of their containing scope during the compilation phase. This means you can reference functions or variables before their line of declaration in code, but not for all cases of initializations. In practice, hoisting affects var declarations, function declarations, and, with let and const, introduces a temporal dead zone. According to JavaScripting, grasping hoisting helps you reason about code execution and avoid subtle bugs.

How Hoisting Works Under the Hood

JavaScript uses a two phase execution model: parsing and execution. During parsing, the engine creates an environment for each scope and records declarations. When code runs, those declarations are already in memory thanks to hoisting, but initializations occur at runtime. The var keyword creates a function scoped binding; accessing it before assignment yields undefined. For function declarations, the entire function body is hoisted, so you can call the function before its textual declaration. With let and const, the binding is hoisted as well, but accessing it before initialization throws a ReferenceError due to the temporal dead zone. This distinction explains many surprising bugs and highlights why modern code favors const and let.

Variable Hoisting vs Function Hoisting

Hoisting is often described in two flavors: variable hoisting and function hoisting. Variable hoisting refers to declarations of variables created with var being moved to the top of their function scope, not their block. Function hoisting refers to function declarations being lifted entirely, allowing calls before the function text. Function expressions created with var or let are not hoisted in the same way; only the variable binding is hoisted, while the assigned function value remains in place. Understanding the difference is crucial to predict values during runtime.

Practical Examples That Reveal Hoisting in Action

Example 1: calling a function before its declaration

JavaScript

function greet(){ return 'Hello'; }
console.log(greet()); // Hello

Example 2: accessing a var before declaration

JavaScript

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

Example 3: let and const temporal dead zone

JavaScript

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

The examples illustrate how hoisting behaves differently for var, function, let, and const.

Common Pitfalls and How to Avoid Them

Hoisting can mislead developers into assuming code executes in the order it appears. To minimize surprises, declare variables at the top of their scope using let or const, and prefer function declarations for hoistable behavior. If you must use a function expression, assign it to a const or let binding and call it after initialization. Remember that the temporal dead zone exists for let and const and serves as a guard against premature access.

Best Practices to Master Hoisting

Prefer let and const for predictable scoping and to avoid temporal dead zones sparked by var.
Use function declarations when you want to call a function before its definition; use function expressions or arrow functions for non hoistable behavior.
Avoid mixing var with block scopes; keep declarations in narrow scopes to reduce surprises.
Use modules to limit scope and prevent global hoisting hazards.
Test hoisting behavior in both browsers and Node to understand engine differences and ensure consistent results.

Authority sources

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://tc39.es/ecma262/

Questions & Answers

What is hoisting in JavaScript?

Hoisting is the JavaScript behavior where declarations are moved to the top of their scope during compilation, allowing access before their textual declaration. However, initializations may not occur immediately, especially with let and const.

Does hoisting apply to let and const?

Let and const are hoisted, but they enter a temporal dead zone until the code actually runs to their declaration. Accessing them before this moment throws a ReferenceError.

Are function declarations hoisted and callable before they appear?

Yes. Function declarations are hoisted in full, so you can call them before their textual declaration in the code. Function expressions do not hoist in the same way.

What is the temporal dead zone?

The temporal dead zone is the period between entering a scope and the variable’s declaration where let and const bindings cannot be accessed. Trying to read or write triggers a ReferenceError.

How can I avoid hoisting pitfalls?

Declare variables at the top, prefer let and const, and use function declarations for early calls. Modular code and clear initialization reduce hoisting surprises.

How can I test hoisting in the browser?

Open your browser console or Node REPL and experiment with var, let, and function declarations. Observe undefined vs ReferenceError and the ability to call before a declaration.