Understanding Hoisting Leading to Unexpected Values in JavaScript

Step 1: What is Hoisting?

Hoisting is a JavaScript behavior where variable and function declarations are moved (“hoisted”) to the top of their scope before code execution.

However, only declarations are hoisted, not initializations!
This often leads to unexpected values or errors when variables are accessed before initialization.

---

Step 2: How Hoisting Works

Example of Hoisting with var

console.log(a); // ❓ What happens here?
var a = 10;
console.log(a); // ✅ 10

How JavaScript Interprets It:

Behind the scenes, JavaScript moves declarations to the top:

var a;
console.log(a); // ✅ Undefined (not an error)
a = 10;
console.log(a); // ✅ 10

• var a; is hoisted but not its assignment (a = 10).
• This leads to unexpected undefined values when accessed before assignment.

---

Step 3: Hoisting with let and const

Unlike var, let and const are hoisted but do not get initialized.
Accessing them before declaration causes a ReferenceError due to the “Temporal Dead Zone” (TDZ).

Example:

console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // ✅ 20

How JavaScript Interprets It:

// "Temporal Dead Zone" (TDZ) exists from start of scope until declaration
let b; // Hoisted but not initialized
console.log(b); // ❌ Error
b = 20;
console.log(b); // ✅ 20

Key Takeaways:
✅ var allows access before declaration but returns undefined.
❌ let and const throw ReferenceErrors when accessed before declaration.

---

Step 4: Function Hoisting

Hoisting with Function Declarations

Function declarations are fully hoisted, meaning they can be used before their definition.

Example:

greet(); // ✅ Works!
function greet() {
    console.log("Hello!");
}

How JavaScript Interprets It:

function greet() { // Hoisted completely
    console.log("Hello!");
}

greet(); // ✅ Works fine

• Functions declared with the function keyword are moved to the top, so they can be called before their actual position in the code.

---

Hoisting with Function Expressions

Function expressions (assigned to variables) are not hoisted like function declarations.

Example (Function Expression):

hello(); // ❌ TypeError: hello is not a function
var hello = function() {
    console.log("Hi!");
};

How JavaScript Interprets It:

var hello;
hello(); // ❌ TypeError: hello is not a function
hello = function() {
    console.log("Hi!");
};

• var hello is hoisted, but the function assignment is not.
• So hello is undefined at the time of calling, leading to an error.

---

Step 5: Common Unexpected Hoisting Issues

1. Variables Being undefined Instead of Having a Value

console.log(num); // ❓ Output?
var num = 5;
console.log(num); // ✅ 5

🔹 Fix: Always declare variables at the top of the scope.

var num = 5;
console.log(num); // ✅ 5

---

2. let and const Causing ReferenceErrors Due to TDZ

console.log(score); // ❌ ReferenceError
let score = 100;
console.log(score);

🔹 Fix: Always declare let and const before using them.

let score = 100;
console.log(score); // ✅ 100

---

3. Function Expression vs Function Declaration Confusion

console.log(sum(2, 3)); // ❌ TypeError: sum is not a function
var sum = function(a, b) {
    return a + b;
};

🔹 Fix: Use function declarations instead of function expressions if hoisting is needed.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // ✅ 5

---

Step 6: How to Prevent Hoisting Issues

Best Practice	Why It Helps
Declare variables at the beginning of their scope	Prevents undefined values
Use let and const instead of var	Avoids accidental hoisting issues
Always initialize variables when declaring them	Reduces unexpected behavior
Use function expressions over function declarations	Avoids unintended hoisting

---

Final Thoughts

✅ Understanding hoisting helps prevent hard-to-find bugs
✅ Use let and const to avoid issues caused by var
✅ Declare and initialize variables before use

Would you like me to check your JavaScript code for hoisting issues?