Lexical scope and Closures

Lets us understand lexical environment and closures with a simple analogy.

Imagine you're in the city of Bengaluru. This city represents the global environment in JavaScript. Within this city, there are two apartment complexes — Prestige and Brigade — which represent two separate functions.

Each apartment has several houses, and these houses represent inner functions inside those parent functions.

Now, here’s your task:
🧒 You need to find a boy who lives in one of the houses in the Prestige apartment.

Step-by-step:

1. You start searching inside the house (inner function). If the boy is there, you’ve found your answer!

2. If he’s not there, you look around in the Prestige apartment itself (outer function).

3. If he’s still not found, you search the city of Bengaluru (global environment).

But — ❌ you cannot enter the Brigade apartment to look for this boy. That’s a separate, isolated environment. Even though it's in the same city, it's not connected to Prestige in any way.

---

What does this mean in JavaScript terms?

• Each function has its own environment (like an apartment).

• Inner functions (like houses) can access their own variables, variables in their parent function, and even global variables.

• But they cannot access variables in sibling functions (like a house in Prestige trying to access a boy in Brigade — that's not allowed).

// Global Environment (City: Bengaluru)
const cityName = "Bengaluru";

function prestigeApartment() {
  // Function Environment 1 (Apartment: Prestige)
  const apartmentName = "Prestige";

  function houseA() {
    // Inner Function (House A inside Prestige)
    const boyName = "Rahul";
    console.log(`Boy is ${boyName} from house in ${apartmentName}, ${cityName}`);
  }

  return houseA; // Closure
}

function brigadeApartment() {
  // Function Environment 2 (Apartment: Brigade)
  const apartmentName = "Brigade";

  function houseX() {
    // Inner Function (House X inside Brigade)
    // ❌ Cannot access Prestige's variables
    try {
      console.log(`Trying to access boyName: ${boyName}`); // ReferenceError
    } catch (e) {
      console.log("Cannot access boy from Prestige inside Brigade.");
    }
  }

  return houseX;
}

// 🔍 Task: Find boy from Prestige apartment
const searchBoy = prestigeApartment(); // Returns houseA function
searchBoy(); // ✅ Outputs boy info

// ❌ Trying to search boy from Prestige inside Brigade
const searchWrong = brigadeApartment(); 
searchWrong(); // ❌ ReferenceError or undefined

.

---

🔸 Lexical Environment

A Lexical Environment is the structure that holds variable/function declarations and the reference to its outer environment based on where a function is written (lexed) in the code.

📌 In simple terms:
Wherever a function is physically written in code, it determines what variables it can access — not where it is called from.

💡 In Our Code:

function prestigeApartment() {
  const apartmentName = "Prestige";

  function houseA() {
    const boyName = "Rahul";
    console.log(`${boyName} from ${apartmentName}, ${cityName}`);
  }

  return houseA;
}

• houseA() is lexically enclosed within prestigeApartment(), so it can access:

  • boyName (its own scope)

  • apartmentName (parent scope)

  • cityName (global scope)

This chain of environments (house → apartment → city) is the Lexical Environment.

---

🔸 Closure

A Closure is formed when a function "remembers" and retains access to its lexical scope, even after the outer function has finished execution.

📌 In simple terms:
If a house in Prestige still remembers and can access its apartment and city details even after the apartment doors are closed — that's a closure.

💡 In Our Code:

const searchBoy = prestigeApartment(); // returns houseA
searchBoy(); // still has access to apartmentName and cityName

Even though prestigeApartment() has finished running, searchBoy (which is houseA) still remembers apartmentName and cityName.

That "memory" is what makes it a closure.