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

Область видимости (scope) определяет, где в коде доступна та или иная переменная: глобальная область — весь скрипт/модуль, локальная (функциональная или блочная) — только внутри соответствующего блока или функции.

Зачем нужно

Понимание областей видимости — основа предсказуемого JavaScript. Неконтролируемое использование глобальных переменных ведёт к конфликтам имён, трудноуловимым ошибкам и проблемам при подключении сторонних библиотек. Локальные области позволяют изолировать переменные и управлять видимостью данных.

Где используется

  • Любой JavaScript-код: функции, блоки, модули, классы
  • Паттерн IIFE для создания изолированной области
  • Замыкания — доступ к переменным внешней области

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

// Глобальная переменная — доступна везде
var globalVar = 'глобальная'; // в браузере добавляется в window
let globalLet = 'тоже видна везде в модуле'; // но НЕ добавляется в window

function show() {
  console.log(globalVar); // 'глобальная'
}
show;
console.log(window.globalVar); // 'глобальная' (только var)
console.log(window.globalLet); // undefined

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

function outer() {
  const x = 10; // доступна только в outer

  function inner() {
    const y = 20; // доступна только в inner
    console.log(x); // 10 — доступ к переменной внешней функции
    console.log(y); // 20
  }

  inner;
  // console.log(y); // ReferenceError — y не в области outer
}

outer;
// console.log(x); // ReferenceError

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

{
  let blockVar = 'блочная';
  const blockConst = 'тоже блочная';
  var funcVar = 'функциональная'; // утекает за пределы блока!
}

// console.log(blockVar);  // ReferenceError
// console.log(blockConst); // ReferenceError
console.log(funcVar); // 'функциональная' — var игнорирует блок

// В условиях
if (true) {
  let result = 'OK';
}
// console.log(result); // ReferenceError

Цепочка областей (scope chain)

const global = 'глобальная';

function level1() {
  const l1 = 'первый';

  function level2() {
    const l2 = 'второй';

    function level3() {
      // Доступ ко всей цепочке вверх
      console.log(global); // 'глобальная'
      console.log(l1);     // 'первый'
      console.log(l2);     // 'второй'
    }

    level3;
  }

  level2;
}

level1;

Модульная область (ES Modules)

// module.js
const privateVar = 'видна только в модуле';
export const publicVar = 'доступна при импорте';

// main.js
import { publicVar } from './module.js';
console.log(publicVar);    // OK
// console.log(privateVar); // ReferenceError

Частые ошибки

  • Случайное создание глобальных переменных — присвоение без var/let/const создаёт глобальную переменную в нестрогом режиме: x = 5 вместо let x = 5.
  • Загрязнение глобального пространства var — var в блоках видна во всей функции; используйте let/const.
  • Теневые переменные (shadowing) — объявление переменной с тем же именем во внутренней области скрывает внешнюю; это законно, но может путать.

Связанные темы

Ресурсы