Hoisting in JavaScript

Last updated: Jan 24, 2026

Author :

Kushagra Yadav

Hoisting is one of the most confusing topics for JavaScript beginners.
You may have seen code that works even before a variable or function is defined — that behavior is caused by hoisting.

Function Hoisting (Works Fully)

Function declarations are fully hoisted, meaning you can call them before they are defined.

Example:

Explanation:

The function declaration is hoisted to the top
JavaScript allows the function to be called before its definition
Output:

Hello, welcome!

This is why function declarations are very flexible.

Variable Hoisting with var

Variables declared with var are hoisted but initialized with undefined.

Example:

What actually happens behind the scenes:

Output:

undefined

Explanation:

The variable x exists before execution
But its value is undefined until the assignment runs

Hoisting with let and const (Different Behavior)

Variables declared using let and const are also hoisted, but they are placed in something called the Temporal Dead Zone (TDZ).

That means you cannot use them before declaration.

Example:

This will throw an error:

ReferenceError: Cannot access 'a' before initialization

Explanation:

let and const are hoisted
But they are not accessible before their declaration
This makes code safer and prevents bugs

Function Expression Hoisting

Function expressions behave like variables, not like function declarations.

Example:

This will cause an error because:

sayHi is treated like a variable
It is not available before initialization

Correct way:

Quick Comparison of Hoisting Behavior

Declaration Type	Hoisted?	Usable Before Declaration?
Function declaration	Yes	Yes
var variable	Yes	Yes (value is `undefined`)
let variable	Yes	No (Temporal Dead Zone)
const variable	Yes	No (Temporal Dead Zone)
Function expression	Depends on variable	No

Common Mistakes Beginners Make

Using variables before declaring them

Although this works because of hoisting, it is bad practice.

Best practice

Always declare variables before using them:

Even better, use let or const for safer behavior.

Why Understanding Hoisting is Important

Mastering hoisting in JavaScript helps you:

Avoid unexpected bugs
Read code more confidently
Understand execution behavior
Perform better in interviews
Learn advanced concepts like closures and scope

Hoisting is one of the most commonly asked topics in JavaScript interviews.

Simple Mental Model for Hoisting

You can think of JavaScript as doing this internally:

Scans your code
Stores all variable and function declarations in memory
Then executes the code line by line

Understanding this makes hoisting much easier.

Quick Summary

Hoisting moves declarations to the top
Function declarations are fully hoisted
var is hoisted and initialized with undefined
let and const are hoisted but not accessible before declaration
Function expressions follow variable hoisting rules

Conclusion

Hoisting in JavaScript is not magic — it is just how the JavaScript engine prepares your code before execution. Once you understand how declarations behave with var, let, const, and functions, you can avoid confusing bugs and write cleaner code.

Hoisting is a core JavaScript concept that every developer must understand well.