var vs let

let

У объявлений переменной через let есть три основных отличия от var:

1. Область видимости переменной let – блок {...}.

   Как мы помним, переменная, объявленная через var, видна везде в функции.

   Переменная, объявленная через let, видна только в рамках блока {...}, в котором объявлена.

   Это, в частности, влияет на объявления внутри if, while или for.

   Например, переменная через var:

   var apples = 5;
   
   if (true) {
     var apples = 10;
   
     alert(apples); // 10 (внутри блока)
   }
   
   alert(apples); // 10 (снаружи блока то же самое)

   В примере выше apples – одна переменная на весь код, которая модифицируется в if.

   То же самое с let будет работать по-другому:

   let apples = 5; // (*)
   
   if (true) {
     let apples = 10;
   
     alert(apples); // 10 (внутри блока)
   }
   
   alert(apples); // 5 (снаружи блока значение не изменилось)

   Здесь, фактически, две независимые переменные apples, одна – глобальная, вторая – в блоке if.

   Заметим, что если объявление let apples в первой строке (*) удалить, то в последнем alert будет ошибка: переменная не определена:

   if (true) {
     let apples = 10;
   
     alert(apples); // 10 (внутри блока)
   }
   
   alert(apples); // ошибка!

   Это потому что переменная let всегда видна именно в том блоке, где объявлена, и не более.

2. Переменная let видна только после объявления.

   Как мы помним, переменные var существуют и до объявления. Они равны undefined:

   alert(a); // undefined
   
   var a = 5;

   С переменными let всё проще. До объявления их вообще нет.

   Такой доступ приведёт к ошибке:

   alert(a); // ошибка, нет такой переменной
   
   let a = 5;

   Заметим также, что переменные let нельзя повторно объявлять. То есть, такой код выведет ошибку:

   let x;
   let x; // ошибка: переменная x уже объявлена

   Это – хоть и выглядит ограничением по сравнению с var, но на самом деле проблем не создаёт. Например, два таких цикла совсем не конфликтуют:

   // каждый цикл имеет свою переменную i
   for(let i = 0; i<10; i++) { /* … */ }
   for(let i = 0; i<10; i++) { /* … */ }
   
   alert( i ); // ошибка: глобальной i нет

   При объявлении внутри цикла переменная i будет видна только в блоке цикла. Она не видна снаружи, поэтому будет ошибка в последнем alert.

3. При использовании в цикле, для каждой итерации создаётся своя переменная.

   Переменная var – одна на все итерации цикла и видна даже после цикла:

   for(var i=0; i<10; i++) { /* … */ }
   
   alert(i); // 10

   С переменной let – всё по-другому.

   Каждому повторению цикла соответствует своя независимая переменная let. Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.

   Это позволяет легко решить классическую проблему с замыканиями, описанную в задаче Армия функций.

   function makeArmy() {
   
     let shooters = [];
   
     for (let i = 0; i < 10; i++) {
       shooters.push(function() {
         alert( i ); // выводит свой номер
       });
     }
   
     return shooters;
   }
   
   var army = makeArmy();
   
   army[0](); // 0
   army[5](); // 5

   Если бы объявление было var i, то была бы одна переменная i на всю функцию, и вызовы в последних строках выводили бы 10.

   А выше объявление let i создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.

https://learn.javascript.ru/let-const