Scope Chain & Lexical Environment0%
Class Syntax & Constructor Methods

Scope Chain & Lexical Environment

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Scope Chain & Lexical Environment in Modern JavaScript

Scope determines the visibility and accessibility of variables in JavaScript. Understanding how the JavaScript engine resolves variable references across nested functions requires mastering the Lexical Environment and the Scope Chain.

1. Lexical Scoping Explained

JavaScript uses Lexical Scoping (also called Static Scoping). This means:

The scope of an identifier is determined by its physical location in the source code at author time, not where the function is called!
JavaScript
const user = 'Global Alice';
 
function displayUser() {
console.log(user);
}
 
function outer() {
const user = 'Local Bob';
displayUser(); // What will this print?
}
 
outer(); // Prints: "Global Alice" (NOT "Local Bob"!)

Why? Because displayUser was lexically declared in the global scope. It resolves identifiers based on where it was born, not where it was invoked.

2. Structure of a Lexical Environment

Under the hood, every execution context has an associated Lexical Environment consisting of two components:

  1. 1
    Environment Record: The dictionary storing local variables, function declarations, and arguments.
  2. 2
    Reference to the Outer Lexical Environment: A pointer to the parent environment in which the function was physically created.
Output
┌───────────────────────────────────────────────────────────┐
│ Global Lexical Environment │
│ • Environment Record: { user: 'Global Alice' } │
│ • Outer Reference: null │
└─────────────────────────────▲─────────────────────────────┘
│
┌─────────────────────────────┴─────────────────────────────┐
│ displayUser() Lexical Environment │
│ • Environment Record: { } │
│ • Outer Reference: ──────────► Points to Global! │
└───────────────────────────────────────────────────────────┘

3. The Scope Chain Lookup Mechanism

When a variable is accessed inside a function:

  1. 1
    The engine checks the current function's local Environment Record.
  2. 2
    If not found, it follows the outer reference to the parent Lexical Environment.
  3. 3
    It repeats this traversal up the chain until finding the variable.
  4. 4
    If it reaches the Global Environment (outer === null) and still cannot find the variable, it throws a ReferenceError.
JavaScript
const globalA = 'A';
 
function levelOne() {
const levelOneB = 'B';
 
function levelTwo() {
const levelTwoC = 'C';
// Can access C (local), B (parent), and A (grandparent)!
console.log(levelTwoC, levelOneB, globalA);
}
 
levelTwo();
}
 
levelOne(); // Output: "C B A"

4. Block Scope vs Function Scope

  • var is Function Scoped: Ignores curly brace blocks (if, for, while). It leaks outside blocks!
  • let and const are Block Scoped: Create a new lexical block environment for every { ... } pair.
JavaScript
if (true) {
var leakedVar = 'I escaped!';
let trappedLet = 'I am trapped inside!';
}
 
console.log(leakedVar); // 'I escaped!'
// console.log(trappedLet); // ReferenceError: trappedLet is not defined
Interactive Quiz

Practice Quiz

Question 1
What does "Lexical Scoping" mean in JavaScript?
Question 2
What are the two internal components of a Lexical Environment in the ECMAScript specification?
Question 3
What happens when JavaScript looks for a variable that does not exist in any lexical environment up to the global scope?
Question 4
Which declaration keyword is NOT confined by if or for blocks?
Question 5
In nested functions, can an outer function access variables declared inside an inner child function?
Next Lesson

Class Syntax & Constructor Methods

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Execution Context & Call Stack Deep DiveClass Syntax & Constructor Methods

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext