The Scope Chain & Lexical Environment

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Where Can Variables Be Found?

Scope determines where variables are accessible in your code. Lexical Environment refers to where code is physically written in your script hierarchy.

2. Why It Matters

When a function accesses a variable, JavaScript searches its local scope first. If not found, it travels UP the Scope Chain to parent scopes until it reaches the Global Scope.

3. The Scope Chain Search Diagram

Outer scopes cannot look inside inner function scopes, but inner functions have full access to their parent lexical environments:

[ Global Scope ] -> globalVar = "Global"
       ^
       | (Searches Upward)
[ Outer Function ] -> outerVar = "Outer Scope"
       ^
       | (Searches Upward)
[ Inner Function ] -> localVar = "Local"

const globalName = "DevLoom";

function outer() {
  const outerVar = "Outer Scope";

  function inner() {
    // Searches local -> Outer -> Global
    console.log(`${globalName} | ${outerVar}`);
  }

  inner();
}

outer(); // Output: "DevLoom | Outer Scope"

4. Lexical Scope vs. Dynamic Scope

JavaScript uses Lexical Scoping (Static Scoping). This means variable resolution depends on where functions are defined in the source code, NOT where they are called from!

5. Common Mistakes

• Polluting Global Scope: Assigning a variable without const, let, or var inside a function (e.g. score = 100) implicitly attaches it to the global window object in non-strict mode.
• Assuming Parent Can Read Child Variables: Parent scopes CANNOT read variables declared inside child functions!

6. Next Steps

Keep variables tightly scoped inside functions. Next, let's explore Block Scope and the Temporal Dead Zone (TDZ)!