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

Технический фундамент scope-модели

Scope определяет границы данных и побочных эффектов:

локальные переменные ограничивают влияние логики на систему;
блочная видимость защищает от утечек промежуточных значений;
лексическая модель делает зависимости функций предсказуемыми;
минимальная зона жизни переменной упрощает чтение и отладку.

Грамотная работа со scope — базовый шаг к модульному и устойчивому коду.

Почему область видимости так важна

Область видимости определяет, где переменная доступна. Если границы не понимаешь, появляются типичные баги: "переменная не найдена", "переменная неожиданно перезаписалась", "функция берет не то значение".

Ключевой момент: понимать scope = контролировать, откуда берутся данные и где они могут изменяться.

Проверь себя: почему две переменные с одинаковым именем в разных блоках не всегда конфликтуют?

Глобальная область

Переменная в глобальной области доступна почти везде в файле.

const appName = 'Course App';

function printAppName() {
  console.log(appName);
}

Это удобно, но опасно при избытке глобальных переменных: растет связность и риск случайных изменений.

Функциональная область

Переменные, объявленные внутри функции, видны только в ней.

function buildStatus(score) {
  const threshold = 70;
  return score >= threshold ? 'passed' : 'retry';
}

// console.log(threshold); // ReferenceError

Смотри, что важно: функция создает локальный "контейнер" имен.

Блочная область (`let`/`const`)

Блок {} в if, for и других конструкциях тоже ограничивает доступ.

if (true) {
  const mode = 'preview';
}

// console.log(mode); // ReferenceError

Здесь часто путаются с var, который не ограничен блоком.

if (true) {
  var flag = true;
}
console.log(flag); // true

Анти-провал: в современном коде используй let/const, чтобы scope был предсказуемым.

Лексическая область видимости

Функция видит переменные из внешней области, где она объявлена.

const prefix = 'ID-';

function makeId(n) {
  return prefix + n;
}

Это называется лексической (статической) областью видимости.

Смотри, что важно: когда ты обращаешься к переменной, JavaScript ищет ее по цепочке областей (scope chain): сначала в текущем блоке/функции, затем во внешней области, и так до глобальной.

const x = 'global';

function outer() {
  const x = 'outer';

  function inner() {
    console.log(x); // outer
  }

  inner();
}

outer();

Проверь себя: почему makeId видит prefix, даже если prefix не передается параметром?

Shadowing: перекрытие имен

Внутри блока можно объявить переменную с тем же именем, что и снаружи.

const status = 'global';

if (true) {
  const status = 'local';
  console.log(status); // local
}

console.log(status); // global

Это не ошибка, но может ухудшить читаемость, если злоупотреблять.

Мини-сценарий: доступ к уроку

const isPublished = true;

function getAccess(isAuth) {
  if (!isPublished) return 'closed';
  if (!isAuth) return 'auth-required';
  return 'open';
}

Здесь каждая переменная живет в своей зоне ответственности:

глобальный флаг публикации;
параметр функции;
локальные вычисления.

Это делает поведение читаемым и тестируемым.

Частые ошибки новичков

Случайно использовать переменную вне ее области.
Переиспользовать одинаковые имена без необходимости.
Писать на var и ловить утечки из блоков.
Хранить слишком много логики в глобальных переменных.

Анти-провал: держи переменную как можно ближе к месту использования.

Что будет, если изменить входные данные

Если isPublished = false, функция всегда вернет closed независимо от isAuth. Это пример приоритета условий + правильного использования scope: данные контролируемы и не "протекают" между случайными участками кода.

Проверь себя: почему такой код легче отлаживать, чем сценарий с множеством глобальных флагов?

Краткий итог

Scope определяет, где переменная доступна и где может быть изменена.
Основные уровни: глобальный, функциональный, блочный.
let/const дают более безопасное поведение области видимости, чем var.
Лексическая область объясняет доступ к внешним переменным.
Контроль scope уменьшает число багов и делает код понятнее.

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