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

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

У JavaScript існують три типи областей видимості змінних:

1. Глобальна область видимості (Global Scope): Змінні, які оголошені поза будь-якою функцією або блоком коду, мають глобальну область видимості і можуть бути доступні з будь-якої частини програми.

let globalVariable = 'Я глобальна змінна';

function doSomething() {
    console.log(globalVariable); // Можна звертатися до globalVariable
}

1. Локальна область видимості (Local Scope): Змінні, оголошені всередині функції або блоку коду, мають локальну область видимості. Ці змінні доступні лише всередині тієї функції або блоку, в якій вони були оголошені.

function doSomething() {
    let localVariable = 'Я локальна змінна';

    console.log(localVariable); // Можна звертатися до localVariable тут
}

1. Блочна область видимості (Block Scope): Введено в ECMAScript 6 (ES6) за допомогою let та const. Змінні, оголошені всередині блоку коду (наприклад, умовного оператора if, циклу for, тощо) за допомогою let або const, мають область видимості тільки всередині цього блоку. Будь-яка конструкція, яка використовує фігурні дужки {} (умови, цикли, функції тощо), створює нову локальну область видимості.

if (true) {
    let blockVariable = 'Я змінна з блоковою областю видимості';
    console.log(blockVariable); // Можна звертатися до blockVariable тут
}
console.log(blockVariable); // ReferenceError: blockVariable is not defined

Змінні, оголошені за допомогою var (перед введенням ES6), мали проблему з областю видимості, оскільки вони мали функціональну область видимості (функціональні змінні були доступні у всій функції). З let та const, область видимості змінних більш передбачувана, що полегшує контроль за областями видимості змінних в програмах JavaScript.

Глибина вкладеності областей видимості - необмежена. Всі вони будуть працювати за одним принципом: область видимості має доступ до всіх змінних, оголошених вище по ієрархії вкладеності, але не може отримати доступ до змінних, оголошених у вкладених областях видимості.

// GLOBAL BLOCK 
const globalValue = "Global value";

console.log(globalValue); // "Global value"
console.log(localValueA); // ReferenceError: localValueA is not defined
console.log(localValueB); // ReferenceError: localValueB is not defined
console.log(localValueC); // ReferenceError: localValueC is not defined

// BLOCK A
if (true) {
  const localValueA = "Local value A";

  console.log(globalValue); // "Global value"
  console.log(localValueA); // "Local value A"
  console.log(localValueB); // ReferenceError: localValueB is not defined
  console.log(localValueC); // ReferenceError: localValueC is not defined

  // BLOCK B
  if (true) {
    const localValueB = "Local value B";

    console.log(globalValue); // "Global value"
    console.log(localValueA); // "Local value A"
    console.log(localValueB); // "Local value B"
    console.log(localValueC); // ReferenceError: localValueC is not defined
  }
}

// BLOCK C
if (true) {
  const localValueC = "Local value C";

  console.log(globalValue); // "Global value"
  console.log(localValueA); // ReferenceError: localValueA is not defined
  console.log(localValueB); // ReferenceError: localValueB is not defined
  console.log(localValueC); //  "Local value C"
}