JavaScript Deixe

Índice

Mostrar índice

A palavra-chave let foi introduzida em ES6 (2015)

Variáveis definidas com let não podem ser redeclaradas

Variáveis definidas com let devem ser declaradas antes do uso

Variáveis definidas com let têm Block Scope

Não pode ser redeclarado

Variáveis definidas com let não podem ser declaradas novamente.

Você não pode declarar novamente acidentalmente uma variável declarada com let.

Com let você não pode fazer isso:

let x = "John Doe";

let x = 0;

Com var você pode:

var x = "John Doe";

var x = 0;

Escopo do bloco

Antes do ES6 (2015), o JavaScript tinha Escopo Global e Escopo de Função.

ES6 introduziu duas novas palavras-chave JavaScript importantes: let e const.

Essas duas palavras-chave fornecem Block Scope em JavaScript.

Variáveis declaradas dentro de um bloco {} não podem ser acessadas de fora do bloco:

Exemplo

{ 
  let x = 2;
  }
// x can NOT be used here

Variáveis declaradas com a palavra-chave var NÃO podem ter escopo de bloco.

Variáveis declaradas dentro de um bloco { } podem ser acessadas de fora do bloco.

Exemplo

{ 
  var x = 2; 
  }
// x CAN be used here

Redeclarando Variáveis

Redeclarar uma variável usando a palavra-chave var pode causar problemas.

Redeclarar uma variável dentro de um bloco também irá redeclarar a variável fora do bloco:

Exemplo

var x = 10;
// Here x is 10

{ 
var x = 2;
// Here x is 2
}

// Here x is 2

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using var</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Redeclarar uma variável usando a palavra-chave let pode resolver esse problema.

Redeclarar uma variável dentro de um bloco não irá declarar novamente a variável fora o bloco:

Exemplo

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Diferença entre var, let e const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

O que é bom?

let e const tem escopo de bloco.

let e const não pode ser redeclarado.

let e const deve ser declarado antes do uso.

let e const não se vincula a isto.

let e const não são içados.

O que não é bom?

var não precisa ser declarado.

var é içado.

var se liga a isso.

Suporte ao navegador

As palavras-chave let e const são não é compatível com o Internet Explorer 11 ou anterior.

A tabela a seguir define as primeiras versões de navegadores com suporte total:


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Redeclarando

É permitido redeclarar uma variável JavaScript com var em qualquer lugar de um programa:

Exemplo

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Com let, NÃO é permitido redeclarar uma variável no mesmo bloco:

Exemplo

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Redeclarar uma variável com let, em outro bloco, É permitido:

Exemplo

let x = 2;   // Allowed
{
let x = 3;   // Allowed
  }
  
  {
let x = 4;    // Allowed
  }

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Vamos içar

Variáveis definidas com var são içadas para o topo e pode ser inicializado a qualquer momento. <p>Significado: Você pode usar a variável antes de ser declarada:

Exemplo

Tudo bem:

 carName = "Volvo";
  var carName;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Se você quiser aprender mais sobre içamento, estude o capítulo içamento em JavaScript. <p>Variáveis definidas com let também são içadas para o topo do bloco, mas não inicializado.

Significado: usar uma variável let antes de ser declarada resultará em um Erro de referência:

Exemplo

carName = "Saab";
let carName = "Volvo";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>