JavaScript Coding Day 11 | Hoisting in JavaScript – A Complete Beginner-Friendly Guide

November 25, 2025

Hoisting in JavaScript – A Complete Beginner-Friendly Guide

Watch the lesson tutorial 🔻

Hoisting is one of the most misunderstood concepts in JavaScript. If you are learning JS, you must understand how variable and function declarations behave before the code is executed.

This article explains hoisting in a simple way, with clear examples, expected outputs, and explanations.

🔍 What Is Hoisting?

Hoisting means JavaScript moves all variable and function declarations to the top of the scope during the compile phase — before the code runs.

This means you can sometimes use a function or variable before it is declared in the code. However, different types of variables behave differently.

🧪 Example 1: Hoisting with `var`

JavaScript
console.log(x);  
var x = 10;

✔ Output:

Plaintext

undefined

✔ Why?

The declaration var x is hoisted (moved to the top).
The value (10) is not hoisted.

JavaScript treats the code like this:

JavaScript
var x;          // Declaration moved to top
console.log(x); // undefined
x = 10;         // Assignment stays here

🧪 Example 2: Hoisting with `let`

JavaScript
console.log(y);  
let y = 20;

❌ Output:

Plaintext

ReferenceError: Cannot access 'y' before initialization

✔ Why?

let is hoisted but placed in the Temporal Dead Zone (TDZ).
You cannot access the variable before the specific line where it is declared.

🧪 Example 3: Hoisting with `const`

JavaScript
console.log(z);
const z = 30;

❌ Output:

Plaintext

ReferenceError: Cannot access 'z' before initialization

✔ Why?

const behaves exactly like let.
It is hoisted but initialized only at the line of declaration.
It stays in the Temporal Dead Zone until the code reaches the declaration.

🧪 Example 4: Function Declarations Are Fully Hoisted

JavaScript
greet();

function greet() {
  console.log("Hello World!");
}

✔ Output:

Plaintext

Hello World!

✔ Why?

Function declarations are fully hoisted.
Both the function name and the body are moved to the top.
You can call them safely before writing them in your code.

🧪 Example 5: Function Expressions Are Not Fully Hoisted

JavaScript
sayHello();

var sayHello = function() {
  console.log("Hello!");
};

❌ Output:

Plaintext

TypeError: sayHello is not a function

✔ Why?

Only the variable declaration var sayHello is hoisted.
The function assignment is not hoisted.

During execution, JavaScript sees this:

JavaScript
var sayHello;   // undefined
sayHello();     // undefined() → TypeError
sayHello = function() { ... }

🧪 Example 6: Arrow Functions with `let` / `const`

JavaScript
welcome();

const welcome = () => {
  console.log("Welcome!");
};

❌ Output:

Plaintext

ReferenceError

✔ Why?

The variable welcome is in the Temporal Dead Zone until its line is reached.
You cannot call it before declaration.

📌 Quick Summary Table

Type	Hoisted?	Value Hoisted?	Access Before Declared?
var	Yes	No	✔ Allowed (`undefined`)
let	Yes	No	❌ Error (TDZ)
const	Yes	No	❌ Error (TDZ)
Function Declaration	Yes	Yes	✔ Allowed
Function Expression	Yes (as var)	No	❌ Error
Arrow Function	Yes (as var)	No	❌ Error

🎯 Final Summary

Hoisting is a mechanism where JavaScript moves all declarations to the top of their scope. However:

var → Hoisted and initialized as undefined.
let and const → Hoisted but not initialized (stuck in Temporal Dead Zone).
Function declarations → Fully hoisted (safe to use before declaring).
Function expressions / Arrow functions → Behave like variables; they are not hoisted with their value.

Understanding hoisting helps you avoid bugs and write cleaner, safer JavaScript code.

Search This Blog

ChiruCodes