✨ Global, Function, Block - Scopes in JavaScript

---

🛠️ If you’ve ever been stuck debugging the dreaded "❌ variable is not defined" error in JavaScript, chances are you’ve crossed paths with the concept of scope.

🔍 Scope defines where in your code variables, functions, and objects are accessible — think of it as the visibility zone 🗺️ for your variables.

🚫 If something is out of scope, it’s invisible and cannot be used.

💡 Understanding scope is essential for writing clean, efficient, and bug-free JavaScript.

---

🔍 Types

🎯 Think of scope as the playground 🛝 where your variables live.

---

📌 Why Scopes Matter

• Prevent name conflicts in code.

• Enable data privacy.

• Help control memory usage.

• Make debugging easier.

---

A. 🌍 Global Scope

• 📌 Variables declared outside any function or block.

• 🌐 Accessible from anywhere in the code.

var globalVar = "I am global";
let globalLet = "I am also global";
const globalConst = "I am constant globally";

function printGlobal() {
    console.log(globalVar);   // ✅ Accessible
    console.log(globalLet);   // ✅ Accessible
    console.log(globalConst); // ✅ Accessible
}

printGlobal();
console.log(globalVar); // ✅ Accessible
console.log(globalLet);   // ✅ Accessible
console.log(globalConst); // ✅ Accessible

💡 Pro Tip: In browsers, var global attach to the window object:

var name = "Rahul";
console.log(window.name); // Rahul ✅

But let and const do not attach to window.

💡 Why window.variable?

• ✅ In browsers, window is the global object.

• ✅ var attaches to it, let & const do not.

• 🧪 Useful to check global namespace pollution.

Pro Tip: Use direct variable names in your code.
Use window.variable only when checking or manipulating properties of the global object.

---

B. 🛠 Function Scope

• 📌 Variables declared inside a function are accessible only within that function.

• 🔄 A new function scope is created each time the function runs.

function testScope() {
    var funcVar = "Only inside function";
    let funcLet = "Also inside function";
    const funcConst = "Constant in function";

    console.log(funcVar); // ✅ Accessible
    console.log(globalLet);   // ✅ Accessible
    console.log(globalConst); // ✅ Accessible

}

testScope();
console.log(funcVar); // ❌ ReferenceError
console.log(globalLet);   // ❌ ReferenceError
console.log(globalConst); // ❌ ReferenceError

💡 Pro Tip: var is function-scoped, so it ignores block boundaries inside functions.

---

C. 🧱 Block Scope

• 📌 Variables declared with let or const inside { } are accessible only within that block.

• ⚠️ var 🚫 does not respect block scope — it leaks out to the enclosing scope.

{
    let blockLet = "Inside block";
    const blockConst = "Also inside block";
    var blockVar = "Var ignores block";
}

console.log(blockVar);   // ✅ Accessible
console.log(blockLet);   // ❌ ReferenceError
console.log(blockConst); // ❌ ReferenceError

---

🌱 Variable Shadowing

When a variable in a child scope has the same name as one in the outer scope.

let name = "Global";

function sayName() {
  let name = "Function";
  console.log(name); // "Function" (shadows global)
}

sayName();
console.log(name); // "Global"

---

Scope Chain & Nested Scopes

If JS can’t find a variable in the current scope, it looks upward in the scope chain until it reaches global scope.

Example:

let a = "Global A";

function outer() {
    let b = "Outer B";

    function inner() {
        let c = "Inner C";
        console.log(a); // ✅ From global
        console.log(b); // ✅ From outer function
        console.log(c); // ✅ Own variable
    }
    inner();
    console.log(a); // ✅ From global
    console.log(b); // ✅ From outer function
    //console.log(c)  // ❌ ReferenceError
}

outer();
console.log(a); // ✅ From global
//console.log(b); // ❌ FReferenceError
//console.log(c) // ❌ ReferenceError

---

Visual Summary

┌──────────────────────┐
│     Global Scope      │
│ var, let, const       │
└─────────┬────────────┘
          │
┌─────────▼───────────┐
│   Function Scope     │
│ var, let, const      │
└─────────┬───────────┘
          │
┌─────────▼───────────┐
│     Block Scope      │
│ let, const           │
└──────────────────────┘

---

Key Takeaways

✅ Global → Everywhere
✅ Function → Inside the function only
✅ Block → Inside {} only (for let and const)
❌ var ignores block scope
🛡 Always prefer const and let to avoid unexpected leaks