When learning JavaScript, one concept that often confuses beginners – and sometimes even experienced developers – is hoisting in JavaScript.
If you have ever seen JavaScript run code where it uses a variable or function before declaring it, then you have already encountered hoisting.
In this article, we will explain hoisting clearly, practically, and without jargon, using real examples you can understand and remember.
What Is Hoisting in JavaScript?
Hoisting in JavaScript is a default behavior in which the JavaScript engine moves variable and function declarations to the top of their scope during the compilation phase, before executing the code.
In simple terms:
JavaScript scans your code first, allocates memory for variables and functions, and only then starts executing the code line by line.
⚠️ Important note – JavaScript hoists only declarations, not initializations.
How JavaScript Executes Code (Why Hoisting Happens)
To truly understand hoisting, you need to know how JavaScript runs your code.
JavaScript execution happens in two phases:
1. Memory Creation Phase
- Memory is allocated for variables and functions
- var variables → initialized with undefined
- let and const → allocated but not initialized (Temporal Dead Zone)
- Function declarations → fully stored in memory
2. Execution Phase
- Code is executed line by line
- Values are assigned
- Functions are called
Hoisting happens because of this memory creation phase.
Variable Hoisting in JavaScript
➤ Hoisting with var Keyword
console.log(username);
var username = "John";
Output:
undefined
Why no error?
Because JavaScript internally treats the code like this:
var username;
console.log(username);
username = "John";
JavaScript hoists the declaration, but assigns the value later.
➤ Hoisting with let Keyword
console.log(age);
let age = 30;
Output:
ReferenceError: Cannot access 'age' before initialization
Here, let is hoisted but not initialized.
This period is called the Temporal Dead Zone (TDZ).
➤ Hoisting with const Keyword
console.log(country);
const country = "India";
Output:
ReferenceError: Cannot access 'country' before initialization
const behaves the same way as let in terms of hoisting, but it also requires immediate initialization.
Function Hoisting in JavaScript
➤ Function Declarations (Fully Hoisted)
greet();
function greet() {
console.log("Hello World");
}
Output:
Hello World
Function declarations are completely hoisted, which allows you to call them before you define them.
➤ Function Expressions (Not Hoisted)
sayHello();
var sayHello = function () {
console.log("Hello");
};
Output:
TypeError: sayHello is not a function
Here, the JavaScript engine hoists only the sayHello variable as undefined, not the function itself.
Arrow Functions and Hoisting
welcome();
const welcome = () => {
console.log("Welcome!");
};
Output:
ReferenceError
Arrow functions behave like let and const variables – the JavaScript engine hoists them but does not initialize them.
Common Mistakes Developers Make with Hoisting
- Using variables before declaring them
- Assuming let and const behave like var
- Calling function expressions before definition
- Ignoring the Temporal Dead Zone
Understanding hoisting helps you write predictable and cleaner code.
Best Practices to Avoid Hoisting Issues
- Always declare variables at the top of their scope
- Prefer let and const over var
- Define functions before using them
- Use strict and readable code structure
Final Thoughts
Hoisting in JavaScript is not magic – it is simply how the JavaScript engine processes your code internally.
Once you understand memory creation, the execution phase, and the difference between var, let, const, and functions, hoisting becomes easy and predictable.
If you are serious about mastering JavaScript, understanding hoisting is non-negotiable.
Read Also – Javascript:location.reload(true)
