README.md

Новые возможности JavaScript — let

Переменные, объявленные с ключевым словом let, являются локальными. Они имеют 3 основных отличия от переменных типа var.

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

При вызове данной переменной до её объявления произойдёт ошибка.
Происходит это потому, что перед тем как выполнить код, движок JavaScript поднимает переменные типа var «наверх» (т.н. «hoisting»)¹ и присваивает им значение undefined. В случае с let такого не происходит, поэтому появляется ошибка.

// ECMAScript 5
console.log(a); // undefined

var a = true;

// ECMAScript 6
console.log(a); // Ошибка! Такой переменной не существует

let a = true;

2. Область видимости переменной let — блок c фигурными скобками ({...})

Объявленная переменная типа let видна только в рамках блока с фигурными скобками, в котором объявлена.

В примере ниже переменная a объявляется на весь код, и модифицируется в if.

// ECMAScript 5
var a = true;

if (true) {
  var a = false;

  console.log(a);
  // Ожидаемый результат: false
}

console.log(a);
// Ожидаемый результат: false

С let будет иначе, так как областью видимости переменной типа let является блок с фигурными скобками. Поэтому в примере ниже существует 2 независимые переменные a: одна — глобальная, вторая — в блоке if.

// ECMAScript 6
let a = true;

if (true) {
  let a = false;

  console.log(a);
  // Ожидаемый результат: false
}

console.log(a);
// Ожидаемый результат: true

3. Использование в циклах

Переменная типа var всегда является одной на все итерации цикла и существует даже после цикла.

// ECMAScript 5
for (var i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// Ожидаемый результат: 10

Иначе говоря, этот фрагмент кода можно записать вот так:

// ECMAScript 5
var i; // undefined

for (i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// Ожидаемый результат: 10

Переменная типа let работает иначе.
В каждом повторении цикла существует своя независимая переменная let.
Это, например, позволяет легко справиться с проблемами замыкания, так как при каждой итерации в замыкании будет то значение переменной, которая была на соответствующей итерации.

// ECMAScript 5
function makeArray() {
  var arr = [];

  for (var i = 0; i < 10; i++) {
    arr.push(function () {
      console.log(i); // выведется номер итерации
    })
  }

  return arr;
}

var array = makeArray();

array[0]();
// Ожидаемый результат: 10
array[1]();
// Ожидаемый результат: 10

// ECMAScript 6
function makeArray() {
  const arr = [];

  for (let i = 0; i < 10; i++) {
    arr.push(() => console.log(i)); // выведется номер итерации
  }

  return arr;
}

const array = makeArray();

array[0]();
// Ожидаемый результат: 0
array[1]();
// Ожидаемый результат: 1

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

---

А вы реально думали, что JavaScript¹ — интерпретируемый язык? :)