Scope Chain and Lexical Environment

Concept

Lesson 4 gave one rule: a function can look outward to its parent scope, never sideways. A scope is the part of the code where a name can be seen and used. A nested function is a function written inside another function, and the outer one is its parent. This lesson stretches the rule across as many levels as your code has. A function nested three functions deep can still reach all the way up to global, checking one level at a time. That upward walk has a name: the scope chain. It is built from something you met briefly in Lesson 4: the Lexical Environment.

Why This Matters

• It's the one rule behind every “why can this function see that variable?” question you will debug.
• It explains exactly what happens when the same variable name exists at multiple levels — which one actually gets used, and why.
• It's the foundation for closures (Lesson 10). A closure is a function that keeps access to the variables of the place where it was created, even after that place has finished running. You cannot understand closures until this lesson is clear.
• Knowing JS is lexically scoped (not dynamically scoped) tells you that scope is decided when you write the code, not when it runs. Interviewers use this to check real understanding.

The Chain Of Notice-Boards — An Analogy

Lexical Environment — The Formal Definition

A Lexical Environment is the place where the engine keeps the names and values of one scope. It is two things together: its own local memory, plus a reference to its parent's Lexical Environment (a reference is a link that points to something else). That is the whole mechanism. It repeats at every level, because the parent's Lexical Environment has the same two parts and points to its own parent, all the way up to Global. Global's reference points to null, a value that means “nothing here,” so the chain ends.

Lexical (Static) Scope vs. Dynamic Scope

“Lexical” means based on where something is written in your code — not on which function called it. JavaScript decides scope this way. It helps to compare it with the other model:

A function's scope chain is decided when you write it inside another function in your source file. It has nothing to do with who calls it later. That is why you can find the chain just by reading the code, without running it. (JavaScript does not use dynamic scope.)

Case 1: Reading Straight From Global

function frontDesk() {
  console.log(discountRate); // 10
}

var discountRate = 10;
frontDesk();

frontDesk's own local memory has no discountRate, so it follows its outer reference straight to Global. It finds the name there, with the value 10.

1function frontDesk() {
2  console.log(discountRate); // 10
3}
4 
5var discountRate = 10;
6frontDesk();

Case 2: Nested Functions — The Chain Goes As Deep As Needed

function frontDesk() {
  checkAvailability();

  function checkAvailability() {
    console.log(discountRate); // 10
  }
}

var discountRate = 10;
frontDesk();

checkAvailability is nested inside frontDesk. Its own memory has no discountRate — it checks its parent, frontDesk's memory. Not there either, so it keeps going up to Global, where it finds 10. This takes two hops up the chain.

1function frontDesk() {
2  checkAvailability();
3 
4  function checkAvailability() {
5    console.log(discountRate); // 10
6  }
7}
8 
9var discountRate = 10;
10frontDesk();

Case 3: Shadowing — The Nearest Name Wins

function frontDesk() {
  checkAvailability();

  function checkAvailability() {
    var discountRate = 100;
    console.log(discountRate); // 100
  }
}

var discountRate = 10;
frontDesk();

1function frontDesk() {
2  checkAvailability();
3 
4  function checkAvailability() {
5    var discountRate = 100;
6    console.log(discountRate); // 100
7  }
8}
9 
10var discountRate = 10;
11frontDesk();

Case 4: The One-Way Street

function frontDesk() {
  var discountRate = 10;
  checkAvailability();

  function checkAvailability() {
    console.log(discountRate); // 10 — inner sees outer, as always
  }
}

frontDesk();
console.log(discountRate); // ReferenceError: discountRate is not defined

1function frontDesk() {
2  var discountRate = 10;
3  checkAvailability();
4 
5  function checkAvailability() {
6    console.log(discountRate); // 10
7  }
8}
9 
10frontDesk();
11console.log(discountRate); // ReferenceError

See It Live — DevTools Scope Panel

1. Set a breakpoint

   On the console.log(discountRate) line inside checkAvailability in the Case 2 example.

2. Open the Scope panel

   Sources tab, while paused at that breakpoint.

3. Read the panel top to bottom

   The panel lists the scopes from the inside out. First is Local (checkAvailability's own scope, without discountRate), and last is Global, where discountRate: 10 shows up. DevTools shows a Closure (functionName) entry for an outer function only when the inner function uses one of that outer function's variables. In Case 2 it does not, so you will normally see only Local and Global. To see a Closure entry, add var floor = 3; inside frontDesk and print it from checkAvailability. The panel shows the scope chain in the order the engine walks it.

Common Misconceptions

Interview Questions