Область видимости в JavaScript определяет доступность переменных в разных частях кода. Не все переменные одинаково доступны — это зависит от того, где они были объявлены. Давайте разберёмся, как работает область видимости в JavaScript и почему некоторые переменные доступны, а некоторые — нет.

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

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

var globalVar = "Глобальная переменная";

function greet() {
  console.log(globalVar); // Выведет "Глобальная переменная"
}

greet();

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

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

function greet() {
  var localVar = "Локальная переменная";
  console.log(localVar);
}

greet(); // Выведет "Локальная переменная"
console.log(localVar); // Ошибка: localVar is not defined

Понятие блочной области видимости

ES6 (ECMAScript 2015) ввёл понятие блочной области видимости с использованием ключевых слов let и const. Переменные, объявленные с помощью let или const, имеют блочную область видимости и доступны только в блоке, в котором были объявлены.

if (true) {
  let blockVar = "Переменная в блоке";
  console.log(blockVar); // Выведет "Переменная в блоке"
}

console.log(blockVar); // Ошибка: blockVar is not defined

Замыкания

Замыкание в JavaScript — это комбинация функции и лексической области видимости, в которой она была определена. Это позволяет функции сохранять доступ к переменным из области видимости родительской функции даже после того, как родительская функция завершила выполнение.

function outer() {
  var outerVar = "Внешняя переменная";

  function inner() {
    console.log(outerVar); // inner() имеет доступ к outerVar из области видимости функции outer()
  }

  return inner;
}

var innerFunc = outer();
innerFunc(); // Выведет "Внешняя переменная"

Область видимости и функции

Функции в JavaScript также создают свою собственную область видимости, называемую контекстом выполнения. Переменные, объявленные внутри функции, недоступны вне этой функции.

function outer() {
  var outerVar = "Внешняя переменная";

  function inner() {
    var innerVar = "Внутренняя переменная";
    console.log(innerVar); // innerVar доступна внутри функции inner()
  }

  console.log(outerVar); // outerVar доступна внутри функции outer()
  console.log(innerVar); // Ошибка: innerVar is not defined
}

outer();

Понимание области видимости в JavaScript

Понимание области видимости в JavaScript является важным аспектом разработки на этом языке. Правильное использование глобальных, локальных и блочных областей видимости помогает избежать конфликтов и создать более чистый и понятный код.