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

Область видимости — это часть программы, в которой переменная существует и доступна по имени. Благодаря ей переменные одной функции не мешают другой, даже если у них одинаковые имена.

Локальные переменные

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

function calculate() {
  const result = 2 * 21;
  return result;
}
 
console.log(calculate()); // 42

Снаружи функции переменной result не существует. Оператор typeof для неизвестного имени возвращает 'undefined', так что в этом легко убедиться:

function calculate() {
  const result = 42;
  return result;
}
 
console.log(typeof result); // undefined

Глобальные переменные

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

const currency = '$';
 
function formatPrice(amount) {
  return `${amount} ${currency}`;
}
 
console.log(formatPrice(15)); // 15 $

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

Блоки тоже ограничивают видимость

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

const age = 20;
 
if (age >= 18) {
  const message = 'Доступ разрешён';
  console.log(message); // Доступ разрешён
}

После закрывающей скобки message уже не существует. Так же ведёт себя счётчик цикла for (let i = 0; ...) — снаружи цикла его нет.

Внутренние видят внешние

Области видимости вложены друг в друга. Код внутри блока или функции видит свои переменные и все внешние, а внешний код внутренние — нет:

const greeting = 'Привет';
 
function greet(name) {
  const text = `${greeting}, ${name}!`;
  return text;
}
 
console.log(greet('Анна')); // Привет, Анна!

Функция greet использует свой параметр name, свою переменную text и внешнюю greeting.

Затенение

Если внутри функции объявить переменную с тем же именем, что и снаружи, внутренняя затенит внешнюю: внутри функции будет видна только она. Внешняя переменная при этом не меняется:

const name = 'Анна';
 
function show() {
  const name = 'Олег';
  return name;
}
 
console.log(show()); // Олег
console.log(name);   // Анна

Затенение легко сделать случайно, поэтому лучше давать переменным разные имена.

Частая ошибка

Переменную, объявленную внутри блока, пытаются использовать после него. Программа остановится с ошибкой:

if (true) {
  const total = 100;
}
 
total; // ReferenceError: total is not defined

Если значение нужно после блока, объявите переменную до него через let, а внутри блока только присваивайте: let total; и затем total = 100;.