Область видимості

Область видимості (scope) - механізм, який визначає доступність змінних у коді, що виконується.

Ланцюжок областей видимості (scope chain) - області видимості утворюють ієрархію, за якою дочірні області мають доступ до змінних з батьківських областей, але не навпаки.

Цікаво

Змінну видно для коду, що виконується, якщо вона є у поточній області видимості або в ланцюжку областей видимості.

Глобальна область видимості

Змінні, оголошені на найвищому рівні, тобто за межами будь-яких конструкцій на зразок if, while, for і функцій, знаходяться в глобальній області видимості і доступні всюди після їх оголошення.

const globalValue = 10;

console.log(globalValue); // 10

function foo() {
  console.log(globalValue); // 10
}

for (let i = 0; i < 5; i++) {
  console.log(globalValue); // 10

  if (i === 2) {
    console.log(globalValue); // 10
  }
}

Блокова область видимості

Змінні, оголошені всередині інструкцій if, for, функцій та інших блоків коду, взятих у фігурні дужки {}, знаходяться в блоковій області видимості і доступні тільки всередині цього блоку коду або у блоках, вкладених в нього.

function foo() {
  const a = 20;
  console.log(a); // 20

  for (let i = 0; i < 5; i++) {
    console.log(a); // 20

    if (i === 2) {
      console.log(a); // 20
    }
  }
}

// ❌ Помилка! Змінна a - недоступна у глобальній області видимості
console.log(a);

for (let i = 0; i < 3; i++) {
  // ❌ Помилка! Змінна a - недоступна в цій області видимості
  console.log(a);
}

Це можна уявити у вигляді будинку з кімнатами. Будинок знаходиться в глобальній області видимості. Кожна функція і блок створюють нову кімнату, вкладену всередину будинку. Змінні, оголошені всередині цих кімнат, доступні тільки тоді, коли ви знаходитесь всередині цієї кімнати. За межами кімнати ці змінні - недоступні.

for (let i = 0; i < 5; i++) {
  const a = 20;
  console.log(a); // 20

  if (i === 2) {
    const b = 30;
    console.log(a); // 20
    console.log(b); // 30
  }

  if (i === 3) {
    console.log(a); // 20

    // ❌ Помилка! Змінна b - недоступна в цій області видимості
    console.log(b);
  }
}

Пошук за ланцюжком областей видимості

Інтерпретатор намагається спочатку знайти змінну в тій області видимості, в якій до неї звернулися. Якщо така змінна у локальній області видимості - відсутня, то він виходить назовні, на один рівень за одну спробу, доки не знайде значення або не дійде до найвищої області видимості (глобальної) і зрозуміє, що змінну з таким ідентифікатором неможливо знайти, тому що її просто не існує, у такому випадку виникне помилка того, що змінна не оголошена.