Что такое let в JavaScript?

Что такое let в JavaScript

let — это ключевое слово в JavaScript, которое предназначено для объявления переменных с блочной областью видимости (block scope). Оно было введено в стандарте ES6 (2015) как улучшение и альтернатива var, избавляя разработчиков от множества проблем и неожиданных поведений, связанных с поднятием переменных (hoisting) и функциональной областью видимости.

Основные различия между let и var

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

var имеет функциональную область видимости, в то время как let имеет блочную область видимости:

function example() {
  if (true) {
    var x = 1;
    let y = 2;
  }
  console.log(x); // 1 (видна за пределами блока if)
  console.log(y); // ReferenceError: y is not defined
}

В этом примере x с var доступна во всей функции, а y с let доступна только внутри блока if.

Поднятие переменных (Hoisting)

var поднимается на вершину функции и инициализируется как undefined, а let не инициализируется (Temporal Dead Zone):

console.log(a); // undefined (var поднялась)
console.log(b); // ReferenceError: Cannot access 'b' before initialization

var a = 1;
let b = 2;

Этот эффект называется Temporal Dead Zone (TDZ) — промежуток кода между началом блока и объявлением let.

Переопределение переменной

var можно переопределять, а let — нельзя в одной области видимости:

var x = 1;
var x = 2; // ОК

let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

Практическое применение let

В циклах

Это часто вызывает ошибки с var:

// С var — проблема
var buttons = document.querySelectorAll('.btn');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // Всегда будет длина массива
  });
}

// С let — работает правильно
let buttons = document.querySelectorAll('.btn');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // Правильное значение
  });
}

let создает новую переменную i для каждой итерации цикла, что предотвращает проблему замыкания (closure).

В условных блоках

if (condition) {
  let message = 'Ошибка';
  console.log(message); // ОК
}
console.log(message); // ReferenceError

Это помогает избежать загрязнения глобального пространства имен.

Когда использовать let

Рекомендация: используй let по умолчанию в современном JavaScript:

• Безопасность: блочная область видимости предотвращает случайные переопределения
• Читаемость: ясно, где доступна переменная
• Производительность: движки JavaScript лучше оптимизируют let
• Совместимость: let поддерживается всеми современными браузерами

Дополнительные инструменты

Для неизменяемых переменных используй const:

let x = 1; // Можно изменять
x = 2;

const y = 1; // Нельзя переопределять
y = 2; // TypeError: Assignment to constant variable

Итоги

• let — переменная с блочной областью видимости
• Безопаснее var и имеет более предсказуемое поведение
• Используется в циклах, условиях и любых блоках кода
• В современном JavaScript let и const вытеснили var
• По умолчанию используй const, затем let, и избегай var