JavaScript Hoisting Concept
- This lesson explains the hoisting behavior of variables and functions.
What is Hoisting in JavaScript ?
Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their scope during the execution phase, before the code is actually run.
Important point:
Only declarations are hoisted, not initializations.Simple Definition
Hoisting means:
JavaScript “remembers” variable and function declarations before executing the code, even if they are written later in the program.
Analogy
Imagine a classroom:
Teacher first registers student names
Later assigns marks
Even if marks are written later, the teacher already knows the students exist.
Similarly:
JavaScript knows variable names first
Values are assigned later
How JavaScript Executes Code
JavaScript code execution happens in two phases:
Memory Creation Phase
Variables are allocated memory
Function declarations are stored
No values are assigned yet
Execution Phase
Code runs line by line
Values are assigned
Functions are executed
Hoisting happens during the memory creation phase.
Hoisting with var
Example 1: Using Variable Before Declaration
console.log(x);
var x = 10;
Output:
undefined
Why ?
JavaScript internally treats the code like this:
var x;
console.log(x);
x = 10;
Declaration is hoisted
Initialization stays in place
Default value is undefined
Important Rule for var
var declarations are hoisted
Initialized with undefined
No error occurs
Hoisting with let and const
Example 2: Using let Before Declaration
console.log(a);
let a = 5;
Output:
ReferenceError: Cannot access 'a' before initialization
Example 3: Using const Before Declaration
console.log(b);
const b = 20;
Output:
ReferenceError
Why let and const Behave Differently ?
let and const are hoisted
But they are placed in Temporal Dead Zone (TDZ)
Cannot be accessed before declaration
What is Temporal Dead Zone (TDZ) ?
TDZ is the time between:
Start of scope
Variable declaration line
During TDZ:
Variable exists
But cannot be accessed
Example:
{
// TDZ starts
let x = 10; // TDZ ends
}
var vs let vs const (Hoisting)
Feature var let const Hoisted Yes Yes Yes Initialized undefined No No TDZ No Yes Yes Error before declaration No Yes Yes Hoisting with Functions
Function Declaration Hoisting
Demonstrates that function declarations are fully hoisted and can be called before definition.
// Function declaration is hoisted
sayHello();
function sayHello() {
console.log("Hello World");
}Why ?
Entire function is hoisted
Can be called before declaration
Function Expression Hoisting
Demonstrates that function expressions are not hoisted like declarations and cause errors.
// Function expression is not fully hoisted
sayHi(); // TypeError
var sayHi = function () {
console.log("Hi");
};Why ?
Variable sayHi is hoisted as undefined
Function assignment happens later
Arrow Function Hoisting
Demonstrates that arrow functions are not hoisted and cause reference errors when called before declaration.
// Arrow function is not hoisted
greet(); // ReferenceError
let greet = () => {
console.log("Welcome");
};Arrow functions follow variable hoisting rules, not function hoisting rules.
Hoisting Comparison: Functions
Type Hoisted Callable Before Declaration Function Declaration Yes Yes Function Expression Partial No Arrow Function No No Common Mistakes
Assuming hoisting moves code physically
Using let before declaration
Confusing function declarations with expressions
Overusing var
Best Practices
Always declare variables at the top
Prefer let and const
Avoid relying on hoisting
Write readable and predictable code
Key Points to Remember
Hoisting happens during memory creation phase
Only declarations are hoisted
var gives undefined
let and const cause errors before initialization
Function declarations are fully hoisted