Scope Basics: Global, Function & Block

Easy

Scope determines where variables are accessible in your code. Think of scope as a series of nested containers - inner containers can see outward, but outer containers cannot see inward. JavaScript has three types of scope: global (everywhere), function (inside functions), and block (inside curly braces with let/const).

Interactive Visualization

Scope Nesting

Variables declared outside any function/block

globalVar

Key Points

  • Global scope: Variables accessible from anywhere in the code
  • Function scope: Variables declared with var inside a function
  • Block scope: Variables declared with let/const inside {}
  • Inner scopes can access outer scope variables (scope chain)
  • Outer scopes cannot access inner scope variables
  • Variables are looked up through the scope chain until found

Code Examples

Global Scope Access

// Global variable - accessible everywhere
const globalVar = "I'm global";

function myFunction() {
  console.log(globalVar); // ✅ Works!
  return globalVar;
}

myFunction(); // "I'm global"
console.log(globalVar); // "I'm global"

Global variables can be accessed from any function or block

Function Scope with var

function outer() {
  var functionScoped = "I'm function scoped";
  
  if (true) {
    var alsoFunctionScoped = "I leak out!";
    console.log(functionScoped); // ✅ Works!
  }
  
  console.log(alsoFunctionScoped); // ✅ "I leak out!" - var ignores { }
}

outer();
// console.log(functionScoped); // ❌ Error! Not accessible outside

var is function-scoped, not block-scoped. It ignores curly braces inside functions.

Block Scope with let/const

function demo() {
  if (true) {
    let blockScoped = "I'm block scoped";
    const alsoBlockScoped = "Me too!";
    
    console.log(blockScoped); // ✅ Works inside block
  }
  
  // console.log(blockScoped);     // ❌ Error! Block scoped
  // console.log(alsoBlockScoped); // ❌ Error! Block scoped
}

demo();

let and const respect curly braces { } - they are block-scoped

Scope Chain Lookup

const outer = "I'm outside";

function level1() {
  const level1Var = "I'm in level 1";
  
  function level2() {
    const level2Var = "I'm in level 2";
    
    console.log(outer);      // ✅ Found in global
    console.log(level1Var);  // ✅ Found in level1
    console.log(level2Var);  // ✅ Found in current scope
  }
  
  level2();
}

level1();

JavaScript looks up through nested scopes until it finds the variable (scope chain)

Shadowing Variables

const name = "Global";

function outer() {
  const name = "Outer"; // Shadows global "name"
  
  if (true) {
    const name = "Block"; // Shadows outer "name"
    console.log(name); // "Block" - uses closest scope
  }
  
  console.log(name); // "Outer" - outer function scope
}

outer();
console.log(name); // "Global" - global scope

Inner variables with the same name "shadow" outer variables

Common Mistakes

  • Thinking all { } create scope (only with let/const)
  • Assuming outer scopes can see inner scope variables
  • Not understanding that var ignores block scope
  • Creating accidental global variables by forgetting const/let/var

Interview Tips

  • Explain scope as nested containers or bubbles
  • Know the difference between function scope and block scope
  • Be able to trace scope chain lookup
  • Understand variable shadowing