Diferenças entre var e let – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá sobre as diferenças entre as palavras-chave vare let.

Nº 1: escopos de variáveis

As varvariáveis pertencem ao escopo global quando você as define fora de uma função. Por exemplo:

var counter;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, the counteré uma variável global. Isso significa que a countervariável é acessível por qualquer função.

Quando você declara uma variável dentro de uma função usando a varpalavra-chave, o escopo da variável é local. Por exemplo:

function increase() {
    var counter = 10;
}
// cannot access the counter variable hereLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, a countervariável é local para a increase()função. Não pode ser acessível fora da função.

O exemplo a seguir exibe quatro números de 0 a 4 dentro do loop e o número 5 fora do loop.

for (var i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Linguagem de código:  JavaScript  ( javascript )

Saída:

Inside the loop: 0 
Inside the loop: 1 
Inside the loop: 2 
Inside the loop: 3 
Inside the loop: 4 
Outside the loop: 5Linguagem de código:  Sessão Shell  ( shell )

Neste exemplo, a ivariável é uma variável global. Portanto, ele pode ser acessado tanto de dentro quanto depois do forloop.

O exemplo a seguir usa a letpalavra-chave em vez da varpalavra-chave:

for (let i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);Linguagem de código:  JavaScript  ( javascript )

Neste caso, o código mostra quatro números de 0 a 4 dentro de um loop e um erro de referência:

Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Inside the loop: 3
Inside the loop: 4

O erro:

Uncaught ReferenceError: i is not definedLinguagem de código:  JavaScript  ( javascript )

Como este exemplo usa a letpalavra-chave, a variável item escopo bloqueado. Isso significa que a variável isó existe e pode ser acessível dentro do forbloco de loop.

Em JavaScript, um bloco é delimitado por um par de chaves, {}como nas instruções if...elsee for:

if(condition) {
   // inside a block
}

for(...) {
  // inside a block
}Linguagem de código:  JavaScript  ( javascript )

Nº 2: Criação de propriedades globais

As variáveis globais varsão adicionadas ao objeto global como propriedades . O objeto global está windowno navegador da web e globalno Node.js:

var counter = 0;
console.log(window.counter); //  0Linguagem de código:  JavaScript  ( javascript )

Porém, as letvariáveis não são adicionadas ao objeto global:

let counter = 0;
console.log(window.counter); // undefinedLinguagem de código:  JavaScript  ( javascript )

Nº 3: Redeclaração

A varpalavra-chave permite redeclarar uma variável sem nenhum problema:

var counter = 10;
var counter;
console.log(counter); // 10Linguagem de código:  JavaScript  ( javascript )

No entanto, se você declarar novamente uma variável com a letpalavra-chave, receberá um erro:

let counter = 10;
let counter; // errorLinguagem de código:  JavaScript  ( javascript )

#4: A zona morta temporal

As letvariáveis têm zonas mortas temporais, enquanto as varvariáveis não. Para entender a zona morta temporal, vamos examinar os ciclos de vida de ambas varas letvariáveis, que possuem duas etapas: criação e execução.

As variáveis var

Na fase de criação, o mecanismo JavaScript atribui espaços de armazenamento às varvariáveis e as inicializa imediatamente em undefined.
Na fase de execução, o mecanismo JavaScript atribui às varvariáveis os valores especificados pelas atribuições, se houver. Caso contrário, as varvariáveis permanecem indefinidas.

Consulte o contexto de execução para obter mais informações.

As variáveis let

Na fase de criação, o mecanismo JavaScript atribui espaços de armazenamento às letvariáveis, mas não inicializa as variáveis. Fazer referência a variáveis não inicializadas causará um arquivo ReferenceError.
As letvariáveis têm a mesma fase de execução que as varvariáveis.

A zona morta temporal começa no bloco até que a letdeclaração da variável seja processada. Em outras palavras, é o local onde você não pode acessar as letvariáveis antes de elas serem definidas.

Neste tutorial, você aprendeu sobre as diferenças entre palavras-chave vare let.