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

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

Область видимости переменных (variable scope) - доступность переменных в определенном месте кода. Есть несколько областей видимости: глобальная, блочная, eval и функции.

Глобальная область видимости используется по умолчанию. Все и вся имеют доступ к переменным объявленным в ней. Переменные объявленные в глобальной области видимости уязвимы, так как их может изменить любой участок кода.

Рассмотрим на примере. Переменная value объявлена в глобальной области видимости, то есть вне какого-то блока, и доступна в любом месте после объявления.

const value = 5;

if (true) {
  console.log('Block scope: ', value); // 5
}

console.log('Global scope: ', value); // 5
Copy

Любая конструкция использующая фигурные скобки {} (условия, циклы, функции и т. п.) создает новую локальную область видимости, и переменные, объявленные в этой области видимости, используя let или const, не доступны вне этого блока.

if (true) {
  const value = 5;
  console.log('Block scope: ', value); // 5
}

console.log('Global scope: ', value); // ReferenceError: value is not defined
Copy

Глубина вложенности областей видимости не ограничена, и все они буду работать по одному принципу - область видимости имеет доступ ко всем переменным объявленным выше по иерархии вложенности, но не может получить доступ к переменным объявленным во вложенных областях видимости.

Создадим несколько областей видимости и дадим им имена для наглядности.

• Глобальная есть по умолчанию, создадим в ней переменную global

• Далее используя оператор if создадим блочную область видимости block A

• Внутри области видимости block A поставим еще один оператор if, который создаст вложенную область видимости block B

• На одном уровне с block A, создадим область видимости block C все так же используя оператор if

const global = 'global';

if (true) {
  const blockA = 'block A';

  // Видим глобальную + локальную A
  console.log(global); // 'global'
  console.log(blockA); // block A

  /*
   * Переменные blockB и blockC не найдены в доступных областях видимости.
   * Будет ошибка обращения к переменной.
   */
  console.log(blockB); // ReferenceError: blockB is not defined
  console.log(blockC); // ReferenceError: blockC is not defined

  if (true) {
    const blockB = 'block B';

    // Видим глобальную + внешнюю A + локальную B
    console.log(global); // global
    console.log(blockA); // block A
    console.log(blockB); // block B

    /*
     * Переменная blockC не найдена в доступных областях видимости.
     * Будет ошибка обращения к переменной.
     */
    console.log(blockC); // ReferenceError: blockC is not defined
  }
}

if (true) {
  const blockC = 'block C';

  // Видим глобальную + локальную C
  console.log(global); // global
  console.log(blockC); // block C

  /*
   * Переменные blockA и blockB не найдены в доступных областях видимости.
   * Будет ошибка обращения к переменной.
   */
  console.log(blockA); // ReferenceError: blockA is not defined
  console.log(blockB); // ReferenceError: blockB is not defined
}

// Видим только глобальную
console.log(global); // global

/*
 * Переменные blockA, blockB и blockC не найдены в доступных областях видимости.
 * Будет ошибка обращения к переменной.
 */
console.log(blockA); // ReferenceError: blockA is not defined
console.log(blockB); // ReferenceError: blockB is not defined
console.log(blockC); // ReferenceError: blockC is not defined

Будьте внимательны при использовании блочных областей видимости и переменных объявленных в них. Именно эта ошибка, вместе с невнимательностью, часто становится головной болью новичка.