Let против Var в JavaScript: прояснение области видимости и временных мертвых зон

Появившийся в ECMAScript 6 оператор let вызвал замешательство среди разработчиков , в частности, чем оно отличается от установленного ключевого слова var. В этой статье рассматриваются нюансы между этими двумя объявлениями переменных, освещаются правила их области видимости и лучшие варианты использования.

Область действия

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

Пример:

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

В приведенном выше примере переменная var moo остается доступной даже за пределами своего блока, в то время как переменная let baz выдает ошибку ReferenceError при доступе за пределы своего блока.

Temporal Мертвые зоны

Еще одно отличие — временные мертвые зоны (TDZ). Для переменных let существует временная зона от точки объявления до конца блока, в котором они определены. В течение этого периода доступ к переменной let без инициализации приводит к ошибке ReferenceError.

Пример :

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

В этом коде доступ к переменной let foo до ее инициализации приводит к ошибке ReferenceError из-за TDZ.

Когда использовать Let или Var

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