Разница заключается в области переменных, объявленных с каждым.

На практике существует ряд полезных последствий разницы в области:

Переменные

1. let видны только в ближайшем к нему блоке ({ ... }).
2. let переменные используются только в строках кода, которые после объявлена ​​переменная (даже если они подняты !).
3. let переменные не могут быть переопределены последующим var или let.
4. Глобальные переменные let не добавляются к глобальному объекту window.
5. let переменные просты в использовании с закрытием (они не вызывают условия гонки ).

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

Следовательно, переменные let с меньшей вероятностью могут вызывать проблемы при использовании в больших программах или когда независимые разработки объединяются в новые и неожиданные способы.

var может по-прежнему быть полезным, если вы уверены, что хотите эффект единственной привязки при использовании замыкания в цикле ( # 5) или для объявления внешне видимых глобальных переменных в вашем коде (# 4). Использование var для экспорта может быть вытеснено, если export мигрирует из пространства транспилера и на основной язык.

Примеры

1. Не использовать внешний ближайший закрывающий блок: этот блок кода выдает опорную ошибку, потому что второе использование x происходит за пределами блока, где оно объявлено с помощью let:

{
    let x = 1;
}
console.log(`x is ${x}`);  // ReferenceError during parsing: "x is not defined".

В отличие от , тот же пример с var работает.

2. Не использовать перед объявлением: этот блок кода будет выдавать ReferenceError до того, как код будет запущен, потому что x используется до его объявления:

{
    x = x + 1;  // ReferenceError during parsing: "x is not defined".
    let x;
    console.log(`x is ${x}`);  // Never runs.
}

Напротив, тот же пример с var анализирует и работает без каких-либо исключений.

3. Нет повторного объявления. Следующий код демонстрирует, что переменная, объявленная с помощью let, не может быть повторно указана позже:

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

4. Глобалы, не привязанные к window:

var button = "I cause accidents because my name is too common.";
let link = "Though my name is common, I am harder to access from other JS files.";
console.log(link);  // OK
console.log(window.link);  // undefined (GOOD!)
console.log(window.button);  // OK

5. Простое использование с затворами: переменные, объявленные с помощью var, плохо работают с замыканиями внутри петель. Вот простой цикл, который выводит последовательность значений, которые переменная i имеет в разные моменты времени:

for (let i = 0; i < 5; i++) {
    console.log(`i is ${i}`), 125/*ms*/);
}

В частности, эти выходы:

i is 0
i is 1
i is 2
i is 3
i is 4

In JavaScript мы часто используем переменные значительно позже, чем когда они созданы. Когда мы это продемонстрируем, задерживая выход с закрытием, переданным в setTimeout:

for (let i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

... выход остается неизменным, пока мы придерживаемся let. Напротив, если бы мы использовали var i вместо:

for (var i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

... цикл неожиданно выводит «i is 5» пять раз:

i is 5
i is 5
i is 5
i is 5
i is 5