Область видимости переменных в JavaScript

Область видимости переменной - это часть кода, где к этой переменной можно обратиться.

function showMessage() {
  let message = 'Привет!';

  console.log(message);
}

showMessage();

Переменная message создана внутри функции, поэтому она доступна внутри этой функции.

Что такое область видимости

Когда мы объявляем переменную, JavaScript запоминает не только ее значение, но и место, где эта переменная была создана.

От этого места зависит, где переменную можно использовать.

function showUser() {
  let userName = 'Анна';

  console.log(userName);
}

showUser();

console.log(userName);

Первый console.log() сработает, потому что он находится внутри функции.

Второй console.log() вызовет ошибку, потому что снаружи функции переменная userName недоступна.

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

let language = 'JavaScript';

function showLanguage() {
  console.log(language);
}

showLanguage();
console.log(language);

Результат:

JavaScript
JavaScript

Переменная language доступна и внутри функции, и снаружи.

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

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

function calculateTotal() {
  let price = 1000;
  let delivery = 300;

  console.log(price + delivery);
}

calculateTotal();

console.log(price);

Переменная price существует внутри calculateTotal(). Снаружи функции ее нет.

Это помогает не смешивать данные из разных частей программы.

Блок - это код внутри фигурных скобок {}. У let и const есть блочная область видимости.

if (true) {
  let status = 'ready';

  console.log(status);
}

console.log(status);

Первый console.log() сработает, второй вызовет ошибку.

Переменная status была создана внутри блока if, поэтому снаружи этого блока она недоступна.

То же правило работает с циклами.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

Переменная i доступна только внутри цикла.

Если переменная не найдена внутри текущей области, JavaScript ищет ее снаружи.

let userRole = 'admin';

function showRole() {
  console.log(userRole);
}

showRole();

Внутри функции переменной userRole нет. Тогда JavaScript смотрит во внешнюю область и находит ее там.

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

В разных областях видимости могут быть переменные с одинаковыми именами.

let userName = 'Анна';

function showUserName() {
  let userName = 'Игорь';

  console.log(userName);
}

showUserName();
console.log(userName);

Результат:

Игорь
Анна

Внутри функции используется ближайшая переменная userName. Глобальная переменная при этом не меняется.

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

У var нет блочной области видимости. Переменная с var ограничивается функцией, а не блоком.

if (true) {
  var city = 'Москва';
}

console.log(city);

Результат:

Москва

Для let такой код привел бы к ошибке, потому что let видна только внутри блока.

В современном коде чаще используют let и const. Их область видимости проще понять и сложнее случайно нарушить.

1. Область видимости определяет, где переменная доступна.

2. Глобальные переменные доступны из разных частей кода, но их лучше использовать осторожно.

3. Переменные внутри функции доступны только внутри этой функции.

4. У let и const есть блочная область видимости.

5. JavaScript ищет переменные изнутри наружу: сначала в текущей области, потом во внешних.