The concept of scope in JavaScript

  • Scope is the “area” in which a variable or function is accessible—determining who can see or use that data in your code.
  • JavaScript has three main types of scope:
    • Global scope: declared outside functions or blocks—accessible everywhere.
    • Function scope: variables declared inside a function are only accessible within that function.
    • Block scope: with ES6’s let and const, variables are only accessible within the { … } block where they’re declared.
var globalVar = 'I am a global variable';

function exampleFunction() {
  var functionVar = 'I am function-scoped';
  if (true) {
    let blockVar = 'I am block-scoped';
    console.log(globalVar);     // "I am a global variable" – accessible
    console.log(functionVar);   // "I am function-scoped" – accessible
    console.log(blockVar);      // "I am block-scoped" – accessible
  }
  console.log(globalVar);       // accessible
  console.log(functionVar);     // accessible
  // console.log(blockVar);     // Error – blockVar not defined outside the block
}

exampleFunction();

console.log(globalVar);        // accessible
// console.log(functionVar);    // Error – functionVar only inside function
// console.log(blockVar);       // Error – blockVar only inside block

Imagine living in a house with multiple rooms and a yard:

  • If you place an item in the front yard (global scope), anyone in the house can use it.
  • If you place it in the living room (function scope), only people in that room can access it.
  • If you put it in a cabinet inside the living room (block scope), it's only accessible when you're inside that living room and open the cabinet.