Resumo : neste tutorial, você aprenderá como usar a let
palavra-chave JavaScript para declarar variáveis com escopo de bloco.
Introdução à palavra-chave JavaScript let
No ES5, quando você declara uma variável usando a var
palavra-chave, o escopo da variável é global ou local. Se você declarar uma variável fora de uma função, o escopo da variável será global. Quando você declara uma variável dentro de uma função, o escopo da variável é local.
ES6 fornece uma nova maneira de declarar uma variável usando a let
palavra-chave. A let
palavra-chave é semelhante à var
palavra-chave, exceto que essas variáveis têm escopo bloqueado. Por exemplo:
let variable_name;
Linguagem de código: JavaScript ( javascript )
Em JavaScript, os blocos são indicados por chaves {}
, por exemplo, if else
, for
, do while
, while
e try catch
assim por diante:
if(condition) {
// inside a block
}
Linguagem de código: JavaScript ( javascript )
Veja o exemplo a seguir:
let x = 10;
if (x == 10) {
let x = 20;
console.log(x); // 20: reference x inside the block
}
console.log(x); // 10: reference at the begining of the script
Linguagem de código: JavaScript ( javascript )
Como funciona o roteiro:
- Primeiro, declare uma variável
x
e inicialize seu valor como 10. - Segundo, declare uma nova variável com o mesmo nome
x
dentro doif
bloco, mas com valor inicial de 20. - Terceiro, imprima o valor da variável
x
dentro e depois doif
bloco.
Como a let
palavra-chave declara uma variável com escopo de bloco, a x
variável dentro do if
bloco é uma nova variável e obscurece a x
variável declarada na parte superior do script. Portanto, o valor de x
no console é 20
.
Quando o mecanismo JavaScript conclui a execução do if
bloco, a x
variável dentro do if
bloco fica fora do escopo. Portanto, o valor da x
variável que segue o if
bloco é 10.
JavaScript let e objeto global
Ao declarar uma variável global usando a var
palavra-chave, você adiciona essa variável à lista de propriedades do objeto global . No caso do navegador web, o objeto global é o arquivo window
. Por exemplo:
var a = 10;
console.log(window.a); // 10
Linguagem de código: JavaScript ( javascript )
Entretanto, quando você usa a let
palavra-chave para declarar uma variável, essa variável não é anexada ao objeto global como uma propriedade. Por exemplo:
let b = 20;
console.log(window.b); // undefined
Linguagem de código: JavaScript ( javascript )
JavaScript let e função de retorno de chamada em um loop for
Veja o exemplo a seguir.
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
Linguagem de código: JavaScript ( javascript )
A intenção do código é enviar números de 0 a 4 para o console a cada segundo. No entanto, ele gera o número 5
cinco vezes:
5
5
5
5
5
Neste exemplo, a variável i
é uma variável global. Após o loop, seu valor é 5. Quando as funções de callback são passadas para a setTimeout()
execução da função, elas referenciam a mesma variável i
com o valor 5.
No ES5, você pode corrigir esse problema criando outro escopo para que cada função de retorno de chamada faça referência a uma nova variável. E para criar um novo escopo, você precisa criar uma função. Normalmente, você usa o padrão IIFE da seguinte maneira:
for (var i = 0; i < 5; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, 1000);
})(i);
}
Linguagem de código: JavaScript ( javascript )
Saída:
0
1
2
3
4
No ES6, a let
palavra-chave declara uma nova variável em cada iteração do loop. Portanto, você só precisa substituir a var
palavra-chave pela let
palavra-chave para corrigir o problema:
for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
Linguagem de código: JavaScript ( javascript )
Para deixar o código completamente no estilo ES6, você pode usar uma função de seta como segue:
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1000);
}
Linguagem de código: JavaScript ( javascript )
Observe que você aprenderá mais sobre as funções de seta no tutorial posterior .
Redeclaração
A var
palavra-chave permite redeclarar uma variável sem nenhum problema:
var counter = 0;
var counter;
console.log(counter); // 0
Linguagem de código: JavaScript ( javascript )
Entretanto, redeclarar uma variável usando a let
palavra-chave resultará em um erro:
let counter = 0;
let counter;
console.log(counter);
Linguagem de código: JavaScript ( javascript )
Aqui está a mensagem de erro:
Uncaught SyntaxError: Identifier 'counter' has already been declared
Linguagem de código: JavaScript ( javascript )
JavaScript permite variáveis e içamento
Vamos examinar o seguinte exemplo:
{
console.log(counter); //
let counter = 10;
}
Linguagem de código: JavaScript ( javascript )
Este código causa um erro:
Uncaught ReferenceError: Cannot access 'counter' before initialization
Linguagem de código: JavaScript ( javascript )
Neste exemplo, acessar a counter
variável antes de declará-la causa um ReferenceError
. Você pode pensar que uma declaração de variável usando a let
palavra-chave não eleva, mas eleva .
Na verdade, o mecanismo JavaScript irá elevar uma variável declarada pela let
palavra-chave para o topo do bloco. No entanto, o mecanismo JavaScript não inicializa a variável. Portanto, ao fazer referência a uma variável não inicializada, você obterá um arquivo ReferenceError
.
Zona de morte temporal (TDZ)
Uma variável declarada pela let
palavra-chave possui a chamada zona morta temporal (TDZ). O TDZ é o tempo desde o início do bloco até o processamento da declaração da variável.
O exemplo a seguir ilustra que a zona morta temporal é baseada no tempo e não na localização .
{ // enter new scope, TDZ starts
let log = function () {
console.log(message); // messagedeclared later
};
// This is the TDZ and accessing log
// would cause a ReferenceError
let message= 'Hello'; // TDZ ends
log(); // called outside TDZ
}
Linguagem de código: JavaScript ( javascript )
Neste exemplo:
Primeiro, a chave inicia um novo escopo de bloco, portanto, o TDZ é iniciado.
Segundo, a log()
expressão da função acessa a message
variável. No entanto, a log()
função ainda não foi executada.
Terceiro, declare a message
variável e inicialize seu valor como 'Hello'
. O tempo desde o início do escopo do bloco até o momento em que a message
variável é acessada é chamado de zona de morte temporal . Quando o mecanismo JavaScript processa a declaração, o TDZ termina.
Por fim, chame a log()
função que acessa a message
variável fora do TDZ.
Observe que se você acessar uma variável declarada pela let
palavra-chave na TDZ, obterá a ReferenceError
conforme ilustrado no exemplo a seguir.
{ // TDZ starts
console.log(typeof myVar); // undefined
console.log(typeof message); // ReferenceError
let message; // TDZ ends
}
Linguagem de código: JavaScript ( javascript )
Observe que myVar
variável é uma variável inexistente, portanto, seu tipo é indefinido .
A zona de morte temporal evita que você faça referência acidentalmente a uma variável antes de sua declaração.
Resumo
- As variáveis declaradas usando a
let
palavra-chave têm escopo de bloco, não são inicializadas com nenhum valor e não são anexadas ao objeto global. - Redeclarar uma variável usando a
let
palavra-chave causará um erro. - Uma zona morta temporal de uma variável é declarada usando a
let
palavra-chave começa a partir do bloco até que a inicialização seja avaliada.