Let vs. Var em JavaScript: desmistificando escopo e zonas mortas temporais

Introduzida no ECMAScript 6, a instrução let gerou confusão entre os desenvolvedores , particularmente como ela difere da palavra-chave var estabelecida. Este artigo investiga as nuances entre essas duas declarações de variáveis, destacando suas regras de escopo e os melhores casos de uso.

Escopo

A distinção fundamental está em seu comportamento de escopo. As variáveis ​​declaradas com var são restritas à função em que estão definidas (escopo da função), enquanto as variáveis ​​let são confinadas ao bloco em que estão incluídas (escopo do bloco). Isso significa permitir que as variáveis ​​tenham um escopo muito mais restrito, evitando que interajam com variáveis ​​definidas fora de seu bloco imediato.

Exemplo:

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();

No exemplo acima, a variável var moo permanece acessível mesmo fora de seu bloco, enquanto a variável let baz lança um ReferenceError quando acessada fora de seu bloco.

Temporal Zonas Mortas

Outra diferença são as zonas mortas temporais (TDZ). Para variáveis ​​let, existe um TDZ desde o ponto de declaração até o final do bloco em que estão definidas. Durante este período, acessar uma variável let sem inicialização resulta em um ReferenceError.

Exemplo :

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

test();

Neste código, acessar a variável let foo antes de ser inicializada resulta em um ReferenceError por causa do TDZ.

Quando usar Let vs.