Что такое область видимости переменных let, const, var?

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

В JavaScript существует три способа объявления переменных: var, let и const. Они различаются областью видимости, поднятием (hoisting) и возможностью переопределения.

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

Переменные, объявленные с помощью var, имеют функциональную область видимости. Это означает, что они видны внутри функции, где были объявлены, но не ограничиваются блоками кода (например, внутри if, for).

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 – переменная доступна вне блока if
}
exampleVar();

Особенности var:

• Поднимаются (hoisting) в начало функции с инициализацией undefined.
• Могут быть переопределены и объявлены повторно.
• При отсутствии объявления в функции ищутся во внешних областях видимости.

2. Область видимости let и const

Переменные let и const имеют блочную область видимости. Они доступны только внутри блока {}, где были объявлены.

function exampleLetConst() {
  if (true) {
    let a = 20;
    const B = 30;
    console.log(a, B); // 20 30
  }
  // console.log(a); // Ошибка ReferenceError: a не определена
  // console.log(B); // Ошибка ReferenceError: B не определена
}
exampleLetConst();

Ключевые различия:

• let позволяет изменять значение переменной, но не может быть переобъявлена в той же области видимости.
• const требует обязательной инициализации при объявлении и не позволяет изменять ссылку на значение (хотя содержимое объектов/массивов можно изменять).

let count = 5;
count = 6; // OK

const PI = 3.14;
// PI = 3.15; // Ошибка TypeError

const user = { name: "Alice" };
user.name = "Bob"; // OK – изменяется свойство объекта
// user = { name: "Charlie" }; // Ошибка – попытка изменить ссылку

3. Поднятие переменных

Все три типа переменных поднимаются, но с разным поведением:

• var – поднимается с инициализацией undefined.
• let/const – поднимаются, но остаются в "временной мёртвой зоне" до момента объявления.

console.log(z); // undefined
var z = 5;

// console.log(y); // Ошибка ReferenceError – временная мёртвая зона
let y = 10;

Практические рекомендации

Современные подходы к объявлению переменных:

1. Используйте const по умолчанию, когда значение не должно переназначаться.
2. Применяйте let для переменных, которые будут переопределяться.
3. Избегайте var в новом коде из-за неочевидного поведения и проблем с областью видимости.
4. Именуйте константы в верхнем регистре для примитивов (const API_URL = '...').

// Современный подход
function modernExample() {
  const baseUrl = "https://api.example.com";
  let requestCount = 0;
  
  for (let i = 0; i < 5; i++) {
    requestCount++;
    // const внутри цикла создаётся на каждой итерации
    const message = `Request ${i}`;
    console.log(message);
  }
  
  return requestCount;
}

Заключение

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

• Избежания конфликтов имён переменных
• Управления состоянием приложения
• Отладки неочевидных ошибок
• Оптимизации использования памяти

В современном JavaScript стандартом де-факто стало использование const и let, которые обеспечивают предсказуемое поведение и помогают избежать многих ошибок, характерных для var.