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

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

Краткий ответ

let используется для объявления переменных, которые могут изменяться и имеют блочную область видимости. Это предпочтительный способ объявления переменных в современном JavaScript. Общее правило:

• const по умолчанию (для неизменяемых значений)
• let когда нужна переменная, которая меняется
• var избегать (устаревший стандарт ES5)

Отличие let от var

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

// С var
function example() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 — видна за пределами блока if!
}

// С let
function example() {
  if (true) {
    let x = 1;
  }
  console.log(x); // ReferenceError: x is not defined
}

Это важно для изоляции переменных и предотвращения ошибок.

Блочная область видимости let

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); 
}
// Вывод: 3, 3, 3 — i переиспользуется!

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}
// Вывод: 0, 1, 2 — каждая итерация имеет свой j

Это классическая ошибка с замыканиями. let решает её.

Отличие let от const

const объявляет константы, которые нельзя переасигнировать. let позволяет изменять значение:

// const — нельзя переасигновать
const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable

// let — можно переасигновать
let count = 0;
count = 1; // OK
count = 2; // OK

Важно: const не означает "совсем неизменяемо" — объекты и массы можно менять:

const obj = { name: 'Alice' };
obj.name = 'Bob'; // OK — меняем свойство
obj = {}; // TypeError — переасигнировка не допускается

const arr = [1, 2, 3];
arr.push(4); // OK — добавляем элемент
arr = []; // TypeError — переасигнировка не допускается

Практические случаи для let

1. Счётчики и переменные, которые меняются

// let идеален для счётчиков
let count = 0;
button.addEventListener('click', () => {
  count++;
  console.log(`Кликов: ${count}`);
});

2. Переменные в циклах

// Каждая итерация цикла получает свой блок области видимости
for (let i = 0; i < 10; i++) {
  // i локальна для этого блока
}
// console.log(i); // ReferenceError

3. Условные переменные

let user;
if (isAuthenticated) {
  user = getUserData();
} else {
  user = getGuestData();
}

4. Переменные в блоках try/catch

let data;
try {
  data = JSON.parse(jsonString);
} catch (error) {
  data = null;
}
console.log(data); // OK — переменная видна вне блока try

5. Асинхронный код

let results = [];

async function fetchData() {
  results = await fetch('/api/data').then(r => r.json());
}

Сравнение let, const и var

// const — переменная, значение которой не меняется (ПРЕДПОЧТИТЕЛЬНО)
const firstName = 'Alice';
const config = { timeout: 5000 };
config.timeout = 6000; // OK

// let — переменная, которая может менять значение
let age = 25;
age = 26; // OK

// var — старый способ (ИЗБЕГАТЬ)
var legacy = true;
// Проблемы: функциональная область видимости, hoisting, переописание

Лучшие практики

1. Использование const по умолчанию

// Начинайте с const
const userName = 'Alice';
const config = { ...defaultConfig };
const handleClick = () => { /* ... */ };

2. Используйте let только когда нужна переменная

const users = ['Alice', 'Bob'];
let currentIndex = 0; // Меняется в цикле

while (currentIndex < users.length) {
  console.log(users[currentIndex]);
  currentIndex++;
}

3. Никогда не используйте var

// Плохо
var x = 1;
if (true) {
  var x = 2;
}
console.log(x); // 2 — переписалась глобальная переменная!

// Хорошо
const x = 1;
if (true) {
  const x = 2; // Новая переменная, не влияет на x снаружи
}
console.log(x); // 1 — оригинальная переменная не изменилась

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

function example() {
  const a = 1; // Функциональная область видимости
  
  if (true) {
    const b = 2; // Блочная область видимости (блок if)
    let c = 3;   // Блочная область видимости (блок if)
  }
  
  console.log(a);     // 1 — OK
  console.log(b);     // ReferenceError
  console.log(c);     // ReferenceError
}

Temporal Dead Zone (TDZ)

let и const не hoistятся как var:

// С var (hoisting)
console.log(x); // undefined
var x = 1;

// С let (TDZ)
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 1;

Это защита от ошибок — вы не можете использовать переменную до её инициализации.

Вывод

• const по умолчанию для большинства случаев
• let для переменных, которые действительно меняют значение
• var — только в legacy коде, никогда в новых проектах
• let спасает от bugs благодаря блочной области видимости
• let идеален для циклов, асинхронного кода и состояния UI