JavaScript Variables Hoisting in Details
Variable Hoisting in JavaScript
Variable hoisting is a default behavior in JavaScript where all variable declarations are moved to the top of the current scope (function scope or global scope). Understanding hoisting is crucial for writing bug-free JavaScript code.
Understanding Variable Creation
JavaScript variables are created in two stages: declaration and initialization.
Declaration Stage
Only variable reference is created without any value. Accessing it returns undefined.
Initialization Stage
Actual value is assigned to the variable.
var name; // Declaration
name = 'Ankaj'; // Initialization
var message = 'Hello!'; // Declaration & Initialization in one step1. Global Variable Hoisting
Example 1: Before Hoisting
In this example, x is used before declaration, which outputs 10:
x = 10; // Assign 10 to x
document.write(x);
var x; // Declare xAfter Hoisting
JavaScript compiler internally changes the code to:
var x; // Declare x (Hoisted)
x = 10; // Assign 10 to x
document.write(x);Explanation: The declaration var x; is hoisted to the top, but the assignment stays in place.
Example 2: Undefined Output
Accessing a variable before it's initialized returns undefined:
console.log(name); // undefined
var name = 'Ankaj';
console.log(name); // AnkajAfter Hoisting
var name; // Hoisted declaration
console.log(name); // undefined
name = 'Ankaj'; // Assignment stays
console.log(name); // AnkajKey Point: Only the declaration is hoisted, not the initialization. The assignment stays where it is.
2. Local Variable Hoisting
Hoisting also works within function scope:
Before Hoisting
var message = "Document scope";
function myMessage() {
console.log(message); // undefined
var message = 'Function scope';
console.log(message); // Function scope
}
myMessage();After Hoisting
var message = "Document scope";
function myMessage() {
var message; // Hoisted within function
console.log(message); // undefined
message = 'Function scope';
console.log(message); // Function scope
}
myMessage();Note: Local variables are hoisted to the top of their function scope, shadowing outer scope variables.
3. Variable Hoisting with Blocks
Variables declared with var inside blocks are hoisted to the function scope:
Before Hoisting
function display() {
if(false) {
var message = 'hello';
}
console.log(message); // undefined
}
display();After Hoisting
function display() {
var message; // Hoisted to function scope
if(false) {
message = 'hello';
}
console.log(message); // undefined (no ReferenceError)
}
display();Important: The variable message is visible outside the if block but within the function scope.
Hoisting with var, let, and const
Variables and constants declared with let or const are NOT hoisted in the same way:
var (Hoisted)
Variables are hoisted to the top of scope. Accessed before declaration returns undefined.
console.log(name);
var name = "Ankaj";
// undefinedlet (Not Hoisted)
Variables are NOT hoisted. Accessing before declaration throws ReferenceError.
console.log(name);
let name = "Ankaj";
// ReferenceErrorconst (Not Hoisted)
Constants are NOT hoisted. Accessing before declaration throws ReferenceError.
console.log(name);
const name = "Ankaj";
// ReferenceErrorQuick Comparison Table
| Keyword | Hoisted | Before Declaration | Scope |
|---|---|---|---|
| var | ✅ Yes | undefined | Function/Global |
| let | ❌ No | ReferenceError | Block |
| const | ❌ No | ReferenceError | Block |
JavaScript Only Hoists Declarations, Not Initializations
The moving of var statements only applies to the declaration. If there's an initialization combined with the declaration, the initialization stays where it is.
console.log(name); // undefined
var name = "Ankaj";Remember: Only var name; is hoisted, not the assignment name = "Ankaj".
Best Practices
✅ Do's
- • Always declare variables at the top of their scope
- • Use
letandconstinstead ofvarfor better behavior - • Initialize variables when declaring them
- • Understand scope to avoid unexpected behavior
❌ Don'ts
- • Don't rely on hoisting behavior
- • Don't access variables before they're declared
- • Avoid using
varin modern JavaScript - • Don't redeclare variables with different keywords
Summary
Variable hoisting is JavaScript's behavior of moving declarations to the top of their scope. Only var declarations are hoisted, while let and const are not.
Remember: JavaScript hoists the declaration, not the initialization. Understanding hoisting helps prevent bugs and write cleaner, more predictable code. Modern best practices recommend using let and const for better block scope behavior.