What is Hoisting in JavaScript? | Explained with Examples & Visuals

---

🚀 Introduction
Have you ever encountered an error like undefined is not a function or wondered why a variable seems to exist before it's declared?
Welcome to the quirky world of hoisting in JavaScript — a concept that surprises most developers when they first see it in action.

In this blog post, you'll learn:

• What is hoisting in JavaScript?
• How variables and functions are hoisted
• The difference between var, let, and const
• Real examples and a mental model to remember hoisting

---

🔍 What is Hoisting?
Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope (function or global).

This means you can use variables and functions before you declare them — but there’s a catch!

---

📌 Example 1: Variable Hoisting with var

console.log(name); // undefined
var name = "Ankur";

Explanation:
The variable name is hoisted, but only the declaration (not the value) is moved to the top.It’s as if you wrote:

var name;
console.log(name); // undefined
name = "Ankur";

---

🚫 What about let and const?

console.log(age); // ❌ ReferenceError
let age = 25;

Variables declared with letand const are not initialized during hoisting.
They remain in a Temporal Dead Zone (TDZ) until the line of declaration is reached.

---

📌 Example 2: Function Hoisting

greet();

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

✅ This works!
Function declarations are hoisted with their definitions.

---

⚠️ Function Expressions are NOT Hoisted

sayHi(); // ❌ TypeError

var sayHi = function () {
  console.log("Hi!");
};

🧠 Visual Model of Hoisting

---

📝 Summary

Concept	Hoisted?	Accessible before declaration?
var	✅ Yes	⚠️ Yes, but value is undefined
let / const	✅ Yes	❌ No, in TDZ
Function Declaration	✅ Yes	✅ Yes
Function Expression	❌ No	❌ No

---

💬 Final Thoughts
Understanding hoisting helps prevent bugs and write cleaner JavaScript code.
Next time you write a function or a variable, remember this internal "lift" that JavaScript performs.

---

🔗 Read Full Blog with Code and Visuals
👉 https://webcodingwithankur.blogspot.com/2025/06/what-is-hoisting-in-javascript.html

Comments

[Alex Mustiere]

A function expression using var is hoisted.
When you write:

sayHi();
var sayHi = function () {
  console.log("Hi!");
};

It’s as if you wrote:

var sayHi; // sayHi is undefined at this point
sayHi(); // ❌ TypeError (you can't invoke on undefined)
sayHi = function () {
  console.log("Hi!");
};

And if you use let or const you get a ReferenceError.
And the behavior is the same if you use "classic" or "arrow" functions.

[WebTechnology Tutorials]

so , you mean that i have written wrong something in this post.