В чем разница между внешней и глобальной областями видимости?

Разница между внешней и глобальной областями видимости

Область видимости (scope) определяет, где переменная, функция или объект может быть доступна в коде. Эта концепция фундаментальна для управления состоянием и избежания конфликтов имен в JavaScript.

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

1. Глобальная область видимости (Global Scope)

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

// Глобальная область видимости
const globalVariable = 'Я глобальная';
let globalName = 'Петр';

function myFunction() {
  console.log(globalVariable); // 'Я глобальная'
  console.log(globalName);      // 'Петр'
}

myFunction();
console.log(globalVariable); // 'Я глобальная'

В браузере глобальная область видимости — это объект window:

const myGlobal = 'hello';
console.log(window.myGlobal); // 'hello'
console.log(globalThis.myGlobal); // 'hello' (в Node.js используй globalThis)

В Node.js это global или globalThis:

// Node.js
global.myVariable = 'hello';
console.log(globalThis.myVariable); // 'hello'

2. Внешняя область видимости (Outer Scope / Enclosing Scope)

Внешняя область видимости — это область видимости одного уровня выше текущего. Для функции это может быть глобальная область или область другой функции. Для блока это область, содержащая этот блок.

const outerVar = 'Я снаружи';

function outerFunction() {
  const functionVar = 'Я в функции';
  
  function innerFunction() {
    // Для innerFunction:
    // - внешняя область видимости = outerFunction (может видеть functionVar)
    // - глобальная область видимости = выше всего (может видеть outerVar)
    console.log(functionVar);  // 'Я в функции'
    console.log(outerVar);     // 'Я снаружи'
  }
  
  innerFunction();
}

outerFunction();

Практический пример: цепочка областей видимости

// Глобальная область видимости
const level1 = 'уровень 1';

function function1() {
  // Внешняя область видимости для function2 = function1
  const level2 = 'уровень 2';
  
  function function2() {
    // Внешняя область видимости для function3 = function2
    const level3 = 'уровень 3';
    
    function function3() {
      // Для function3:
      // - Внешняя область = function2
      // - Глобальная область видимости = самая верхняя
      console.log(level1);  // 'уровень 1' (из глобальной)
      console.log(level2);  // 'уровень 2' (из внешней function2)
      console.log(level3);  // 'уровень 3' (из своей области)
    }
    
    function3();
  }
  
  function2();
}

function1();

Область видимости блока (Block Scope)

С введением let и const в ES6 область видимости может быть ограничена блоком {}:

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

function example() {
  const functionVar = 'функция';
  
  if (true) {
    const blockVar = 'блок';
    // Внешняя область видимости включает:
    // - переменные из function
    // - переменные из глобальной области
    console.log(blockVar);      // 'блок'
    console.log(functionVar);   // 'функция'
    console.log(globalVar);     // 'глобальная'
  }
  
  console.log(blockVar);        // ReferenceError! blockVar не существует вне блока
  console.log(functionVar);     // 'функция'
}

example();

Var vs Let/Const

Потенциально опасное поведение var с областью видимости функции:

function demonstration() {
  if (true) {
    var varVariable = 'var';   // Область видимости = вся функция
    let letVariable = 'let';   // Область видимости = только блок if
    const constVariable = 'const'; // Область видимости = только блок if
  }
  
  console.log(varVariable);     // 'var' - доступна!
  console.log(letVariable);     // ReferenceError
  console.log(constVariable);   // ReferenceError
}

demonstration();

Поэтому в современном JavaScript используй let и const, а не var.

Замыкания (Closures) - практическое применение

Внешняя область видимости — основа для замыканий:

function createCounter() {
  // Внешняя область видимости для inner функций
  let count = 0;
  
  return {
    increment() {
      // Имеет доступ к count из внешней области видимости
      return ++count;
    },
    decrement() {
      // Также имеет доступ к count
      return --count;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1

// count переменная защищена, доступна только через методы

Ключевые отличия

Лучшие практики

Избегай засорения глобальной области видимости:

// Плохо - загрязняет глобальную область
globalVar1 = 'опасно';
globalVar2 = 'ещё опаснее';

// Хорошо - используй модули или IIFE
(function() {
  const protectedVar = 'защищено';
  // переменная только здесь
})();

// Или с модулями ES6
export const myVar = 'в модуле';

Понимание разницы между глобальной и внешней областями видимости критично для написания чистого, предсказуемого и защищенного кода.