Одна из самых больших проблем с объявлением переменных с ключевым словом var заключается в том, что вы можете переобъявить существующие переменные без каких-либо ошибок (собственно, ошибки здесь и не должно быть, это обычное поведение, просто такое поведение увеличивает вероятность возникновения логических ошибок и лучше этого избегать).
var camper = "James";
var camper = "David";
console.log(camper); // "David"camper изначально объявляется со значением James, а затем переопределяется со значением David, и по сути это уже новая переменная. В небольшом приложении вы можете не столкнуться с этой проблемой, но когда ваш код станет больше, вы можете случайно перезаписать переменную, которую вы не намеревались перезаписывать (и в следствии получить логическую ошибку). Поскольку это поведение не вызывает ошибки, поиск и исправление таких ошибок усложняется. В ES6 было введено новое ключевое слово let чтобы решить эту потенциальную проблему, возникающую при использовании ключевого слова var. Если вы замените код с var на let в объявлениях переменных вышеприведенного кода, результатом будет ошибка.
let camper = "James";
let camper = "David"; // Uncaught SyntaxError: Identifier 'camper' has already been declaredЭту ошибку можно увидеть в консоли вашего браузера. Таким образом, в отличие от var, при использовании let переменная с тем же именем может быть объявлена только один раз в пределах видимости.
Важное замечание: Еще раз уточню на счет уникальности переменных в пределах области видимости. Вот пример:
{
let camper = "James";
{
let camper = "David";
console.log(camper); // "David"
}
console.log(camper); // "James"
}let находятся в блочной области видимости (блочная область ограничивается фигурными скобками { ... }))
Обновите код, используя только ключевое слово let.