var vs let: что выбрать и почему?
Если вы когда-нибудь сталкивались с кодом на JavaScript, то, возможно, заметили, что раньше активно использовалось ключевое слово var, а сейчас в основном применяют let. И да, это не просто модный тренд, у них действительно есть отличия. Давайте разберёмся, в чём же разница, и почему лучше выбрать let для современного кода.
1. Область видимости
С let всё строго – переменная существует только внутри блока {}, в котором она объявлена. То есть, если вы создаёте переменную внутри фигурных скобок, снаружи она будет недоступна:
{
let x = 10;
}
console.log(x); // Ошибка: x не определена
А вот var работает по-другому. У него функциональная область видимости, и переменная доступна во всей функции или, если она объявлена вне функции, в глобальной области.
{
var y = 20;
}
console.log(y); // 20
2. Всплытие (hoisting)
let и var обе поднимаются (hoisting), но ведут себя по-разному. Переменные, объявленные через let, попадают в так называемую "Temporal Dead Zone" (TDZ) до момента их инициализации. То есть, вы не можете использовать их до строки объявления:
console.log(a); // Ошибка: Невозможно получить доступ до инициализации
let a = 5;
А вот var – другое дело. Она тоже поднимается, но сразу инициализируется значением undefined, так что доступна даже до объявления (но лучше так не делать!).
console.log(b); // undefined
var b = 10;
3. Повторное объявление
С let вы не сможете дважды объявить одну и ту же переменную в одной области видимости. Если попытаетесь, получите ошибку:
let x = 10;
let x = 20; // Ошибка: Переменная x уже объявлена
А вот var позволяет переобъявлять переменные без проблем (но это может привести к багам):
var y = 10;
var y = 20; // Работает, значение обновляется
4. Глобальные свойства
Ещё одно интересное отличие. Если вы объявите переменную с let на глобальном уровне, она не станетсвойством объекта window (или global в Node.js):
let x = 10;
console.log(window.x); // undefined
А вот с var глобальная переменная автоматически становится свойством window:
var y = 20;
console.log(window.y); // 20
5. Циклы и замыкания
Когда дело доходит до циклов, let спасает от головной боли. Для каждой итерации создаётся новая переменная, так что можно спокойно использовать замыкания:
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1000); // 0, 1, 2
}
С var же всё не так радужно. Одна переменная на все итерации – и привет, неожиданные результаты:
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1000); // 3, 3, 3
}
В итоге рекомендую использовать let / const в современном коде.
Это безопаснее, понятнее и помогает избежать множества проблем, которые может создать var. А var оставьте для старых скриптов и музея истории JavaScript 👾👾👾👾