JavaScript Hoisting
Learn what hoisting is in JavaScript, how variables and functions are hoisted, the difference between var, let, and const, and common interview questions.
Reading Time
20 min
Lesson
Lesson 12 of 48
What is Hoisting?
Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before code execution. Only declarations are hoisted, not initializations.
In This Lesson You Will Learn
- What is Hoisting?
- Variable Hoisting
- Function Hoisting
- var vs let vs const
- Temporal Dead Zone (TDZ)
- Best Practices
Variable Hoisting with var
Variables declared with var are hoisted and initialized with undefined. Accessing them before declaration does not throw an error.
var Hoisting Example
Console Output
Click “Run” to see the console output here.
What Actually Happens?
JavaScript internally moves the declaration to the top, but not the assignment.
Behind the Scenes
Console Output
Click “Run” to see the console output here.
Hoisting with let
Variables declared using let are hoisted but remain inaccessible until their declaration is reached. This period is called the Temporal Dead Zone (TDZ).
let Example
Console Output
Click “Run” to see the console output here.
Hoisting with const
const behaves similarly to let. It is hoisted but cannot be accessed before declaration.
const Example
Console Output
Click “Run” to see the console output here.
Function Declaration Hoisting
Function declarations are completely hoisted. They can be called before their declaration.
Function Declaration Example
Console Output
Click “Run” to see the console output here.
Function Expression Hoisting
Function expressions behave like variables. If declared with var, only the variable is hoisted, not the function itself.
Function Expression Example
Console Output
Click “Run” to see the console output here.
Arrow Function Hoisting
Arrow functions are also treated as variables. They cannot be called before declaration.
Arrow Function Example
Console Output
Click “Run” to see the console output here.
Hoisting Comparison
| Declaration | Hoisted | Accessible Before Declaration |
|---|---|---|
| var | Yes | Yes (undefined) |
| let | Yes | No |
| const | Yes | No |
| Function Declaration | Yes | Yes |
| Function Expression | Variable Only | No |
| Arrow Function | Variable Only | No |
Temporal Dead Zone (TDZ)
The Temporal Dead Zone is the time between entering a scope and declaring a let or const variable. Accessing the variable during this period throws a ReferenceError.
Common Mistake
Many beginners think JavaScript moves the entire variable or function to the top. In reality, only declarations are hoisted—not the assigned values.
Best Practices
Always declare variables before using them. Prefer let and const over var to avoid hoisting-related bugs and improve code readability.
Summary
Hoisting is JavaScript's behavior of processing declarations before execution. Function declarations are fully hoisted, while var is initialized as undefined. let and const are hoisted but remain in the Temporal Dead Zone until their declaration.