ES6 - let

В этом уроке мы с вами разберем, что такое let в Ecmascript 6.

Вместо var теперь используют let. То есть обычное присваивание переменной выглядит не

var a = 3;

let a = 3;

Зачем вообще было придумывать новый синтаксис?

Первое и самое главное отличие let от var, это то, что она создается внутри блока в котором обьявлена. Это упрощает работу с if, while, for.

Например, на es5 мы пишем вот такой код

var a = 3;

if (true) {
  var a = 5;
  console.log(a);
}
console.log(a);

У нас вывелось 5 и 5, хотя по логике в нормальном языке у нас бы вывелось 5 и блоке if, а снаружи, так как это уже другой блок, вывелось бы 3. Но так как у нас javascript обладает некоторыми проблемами, то здесь одна переменная а на весь код, она описывается вверху кода, а в блоке if она просто модифицируется. Но, по нормальному, мы ожидаем, что мы создадим новую переменную внутри if и будем работать с ней. Для того, чтобы избежать такой проблемы, мы можем использовать let.

С ним переменная внутри if будет независимой переменной внутри блока

let a = 3;

if (true) {
  let a = 5;
  console.log(a);
}
console.log(a);

То есть, применяя let, вы можете быть уверенны, что переменная всегда будет доступна только внутри блока.

Если же мы удалим внешнее обьявление переменной, то переменная в блоке выведется нормально, а второй console.log выдаст ошибку, так как переменна а существует только в блоке и не видна вне этого блока.

if (true) {
  let a = 5;
  console.log(a);
}
console.log(a);

Второе отличие, это то, что переменную let нельзя переопределить. В ес5 вы можете написать

var a = 5;
var a = 3;
console.log(a);

Этот код без проблем переопределит там переменную

Let же выбросит нам ошибку про повторное определение переменной

let a = 5;
let a = 3;
console.log(a);

То же самое будет с циклами. Если у нас есть 2 цикла и мы используем в каждом из них let, то они просто будут двумя локальными переменными. И снаружи эта переменная будет не видна.

for(let i = 0; i<10; i++) {

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

}
console.log(i);

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

var fs = [];
  for(var i = 0; i < 10; i++) {
    fs.push(function (){
      console.log(i);
    })
  }

Здесь мы хотим создать массив функций, каждая из которых будет выводить i в консоль. Если мы вызовем любой елемент массива fs, то мы видим, что в консоль всегда выводится 10. Это потому, что переменная i просто переприсваивается и замыкание является общим для всех итераций.

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

var fs = [];
  for(let i = 0; i < 10; i++) {
    fs.push(function (){
      console.log(i);
    })
  }

Итак, в этом уроке мы разобрали, чем отличается var от let и как вы видите, с let меньше проблем и он работает проще и понятнее. Поэтому использовать let всегда предпочтительнее.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

#2 ES6 - let