Scope

What is Scope?

Scope determines the accessibility of variables, objects, and functions from different parts of the code. JavaScript has three types of scope: Global, Function, and Block scope.

Try Scope

Code Editor

Console Output

Click "Run" to execute your code...

Example 1: Global Scope

// Variables declared outside any function have global scope
var globalVar = 'I am global';
let globalLet = 'I am also global';
const globalConst = 'Me too!';

function accessGlobal() {
  console.log(globalVar);   // I am global
  console.log(globalLet);   // I am also global
  console.log(globalConst); // Me too!
}

accessGlobal();

// Global variables can be accessed from anywhere
if (true) {
  console.log(globalVar); // I am global
}

Example 2: Function Scope

function myFunction() {
  var functionVar = 'I am function scoped';
  let functionLet = 'Me too';
  const functionConst = 'And me';
  
  console.log(functionVar);   // I am function scoped
  console.log(functionLet);   // Me too
  console.log(functionConst); // And me
}

myFunction();

// console.log(functionVar);   // ReferenceError
// console.log(functionLet);   // ReferenceError
// console.log(functionConst); // ReferenceError

// Nested function scope
function outer() {
  var outerVar = 'outer';
  
  function inner() {
    var innerVar = 'inner';
    console.log(outerVar); // Can access outer variable
    console.log(innerVar); // Can access own variable
  }
  
  inner();
  // console.log(innerVar); // ReferenceError - can't access inner
}

Example 3: Block Scope (let and const)

// let and const are block-scoped
{
  let blockLet = 'I am block scoped';
  const blockConst = 'Me too';
  var blockVar = 'I am NOT block scoped';
  
  console.log(blockLet);   // I am block scoped
  console.log(blockConst); // Me too
  console.log(blockVar);   // I am NOT block scoped
}

// console.log(blockLet);   // ReferenceError
// console.log(blockConst); // ReferenceError
console.log(blockVar);      // I am NOT block scoped (var leaks out!)

// Block scope in loops
for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError: i is not defined

for (var j = 0; j < 3; j++) {
  console.log(j); // 0, 1, 2
}
console.log(j); // 3 (var leaks out!)

Example 4: Scope Chain

var global = 'Global';

function level1() {
  var level1Var = 'Level 1';
  
  function level2() {
    var level2Var = 'Level 2';
    
    function level3() {
      var level3Var = 'Level 3';
      
      // Can access all variables in the scope chain
      console.log(global);     // Global
      console.log(level1Var);  // Level 1
      console.log(level2Var);  // Level 2
      console.log(level3Var);  // Level 3
    }
    
    level3();
    // console.log(level3Var); // ReferenceError
  }
  
  level2();
  // console.log(level2Var); // ReferenceError
}

level1();
// console.log(level1Var); // ReferenceError

Example 5: Scope and Variable Shadowing

var name = 'Global Name';

function showName() {
  var name = 'Function Name'; // Shadows global name
  console.log(name); // Function Name
  
  if (true) {
    let name = 'Block Name'; // Shadows function name
    console.log(name); // Block Name
  }
  
  console.log(name); // Function Name
}

showName();
console.log(name); // Global Name

Key Points

Global scope: Variables accessible everywhere
Function scope: Variables accessible only within the function
Block scope: let and const are limited to the block {}
var is function-scoped, let and const are block-scoped
Inner scopes can access outer scope variables (scope chain)
Outer scopes cannot access inner scope variables