Область видимости (Scope) в JavaScript: виды и принципы работы

Что такое область видимости (scope)?

Область видимости (scope) — это часть кода, в которой переменные и функции доступны для использования. В JavaScript область видимости определяет, где можно ссылаться на переменные, и играет ключевую роль в управлении памятью и предотвращении конфликтов имён.

Виды областей видимости

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

• Описание: Переменные, объявленные в глобальном контексте (вне всех функций и блоков), доступны во всем коде.
• Особенности:
  • Загрязняет глобальное пространство имён, что может приводить к конфликтам.
  • Использование глобальных переменных рекомендуется минимизировать.

var globalVar = "I am global"; // или let/const, объявленные вне функций

function showGlobal() {
  console.log(globalVar); // доступ к глобальной переменной
}

Функциональная область видимости (Function Scope)

• Описание: Переменные, объявленные внутри функции, доступны только внутри этой функции.
• Особенности:
  • Функциональная область видимости помогает изолировать переменные и избегать конфликтов между функциями.
  • Ключевое слово var имеет функциональную область видимости.

function example() {
  var localVar = "I am local";
  console.log(localVar); // доступно внутри функции
}

console.log(localVar); // ReferenceError: localVar is not defined

Блочная область видимости (Block Scope)

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

if (true) {
  let blockVar = "I am block-scoped";
  console.log(blockVar); // доступно внутри блока
}
console.log(blockVar); // ReferenceError: blockVar is not defined

Особенности работы областей видимости

• Лексическая область видимости: В JavaScript область видимости определяется во время компиляции (лексически), а не во время выполнения. Это означает, что вложенные функции имеют доступ к переменным внешних функций, даже если они вызываются вне их родительской функции.

function outer() {
  let x = 10;
  function inner() {
    console.log(x); // x доступна здесь благодаря лексической области видимости
  }
  return inner;
}

const innerFunc = outer();
innerFunc(); // 10

• Замыкания (Closures): Замыкание — это функция, которая «запоминает» свою лексическую область видимости, даже когда она выполняется вне своей исходной области. Это позволяет функции использовать переменные, объявленные в её внешнем окружении.

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

Итог

Область видимости в JavaScript делится на:

• Глобальную область: доступна во всем коде.
• Функциональную область: доступна только внутри функции.
• Блочную область: доступна внутри конкретного блока, определяемого фигурными скобками.