Scope Chain and Lexical Scoping in JavaScript

Scope Chain and Lexical Scoping in JavaScript | DevPrep

if (true) {
  let blockScoped = "Only inside this block";
  const alsoBlock = "Same here";
  var notBlock = "I escape the block!"; // var ignores block scope
}
console.log(blockScoped); // ReferenceError!
console.log(notBlock);    // "I escape the block!"

const x = 10;

function outer() {
  const x = 20;
  
  function inner() {
    console.log(x); // 20 — looks up to where inner is DEFINED
  }
  
  inner();
}

function another() {
  const x = 30;
  outer(); // inner still prints 20, not 30
}

const global = "global";

function outer() {
  const outerVar = "outer";
  
  function middle() {
    const middleVar = "middle";
    
    function inner() {
      const innerVar = "inner";
      
      // Scope chain: inner → middle → outer → global
      console.log(innerVar);  // Found in inner scope
      console.log(middleVar); // Found in middle scope
      console.log(outerVar);  // Found in outer scope
      console.log(global);    // Found in global scope
    }
    inner();
  }
  middle();
}

// let and const are hoisted but NOT initialized
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;      // TDZ ends here

// var IS initialized (to undefined)
console.log(y); // undefined (not an error!)
var y = 5;

// Each module has its own scope
// Variables don't leak to global
const moduleVar = "Only accessible in this module";

// Must explicitly export to share
export const shared = "Accessible to importers";

Scope Chain and Lexical Scoping in JavaScript

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Types of Scope

Global Scope

Function Scope

Block Scope (let/const)

Lexical Scoping

The Scope Chain

Temporal Dead Zone (TDZ)

Module Scope

Common Gotchas