DEV Community

Genesis
Genesis

Posted on

Entendendo let, const e escopo em javascript

O que são variáveis?

Variáveis são espaços para guardar valores e utiliza-los em um futuro processamento.
No javascript utiliza-se palavras chaves(keywords) para declarar variáveis:

Declarando uma variável com let

Para declarar uma variável utiliza a keyword let seguindo do nome da variável:

let x; 
console.log(x); //undefined
Enter fullscreen mode Exit fullscreen mode

Uma variável let declarada sem nenhum valor atribuido pelo programador, retorna com valor de undefined.

Declarando uma variável com const

Variáveis utilizando const DEVEM ser declaradas com um valor inicial.
Apenas declarar, sem atribuir o valor gera o erro:

const y;   // SyntaxError: Missing initializer in const declaration
Enter fullscreen mode Exit fullscreen mode

Entendendo o escopo de let e const

O que é escopo?

É o local onde a variável pode ser acessada ou está disponível.

Escopo com let

let a = "oi";

{
  let a = "hi!";

}
Enter fullscreen mode Exit fullscreen mode

Aqui temos uma variável a declarada dentro de um bloco(escopo do bloco) e outra variável a fora do bloco (escopo global)
Temos dois escopos(áreas) diferentes.

Se eu tentar redeclarar a variável no mesmo escopo, gera um erro:

let a = "Oi";
let a = "Hi!"; // SyntaxError: Identifier 'a' has already been declared
console.log(a);
Enter fullscreen mode Exit fullscreen mode

Mas se eu declarar com o mesmo nome e em escopos diferentes:

let a = "Oi";
{
  let a = "Hi!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: Hi!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: Oi
Enter fullscreen mode Exit fullscreen mode

Atualizando o valor de let:

let a = "Oi";
a = "hahaha!";
{
  let a = "Hi!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: Hi!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: hahaha!
Enter fullscreen mode Exit fullscreen mode

Mesmo atualizando o valor de a no escopo global, não interferiu na outra variavel a que foi declarada dentro do bloco.

Atualizando o valor de let no escopo de bloco:

let a = "Oi";

{
  a = "hahaha!";
  console.log(`Valor dentro do bloco: ${a} `); // Valor dentro do bloco: hahaha!
}

console.log(`Valor fora do bloco: ${a}`); // Valor fora do bloco: Oi
Enter fullscreen mode Exit fullscreen mode

Escopo com const

const tem a mesma regra de redeclaração, porem seu valor não pode ser atualizado

const a = "Oi"
{
  const a = "HI"
  console.log(`Valor dentro do bloco: ${a} `) 
}

function exibir() {
  const a = "Estou dentro da função!"
  console.log(a)
}

exibir()
console.log(`Valor fora do bloco: ${a}`) 
// Valor dentro do bloco: HI 
// Estou dentro da função!
// Valor fora do bloco: Oi
Enter fullscreen mode Exit fullscreen mode
const a = "Oi"
{
  a = "HI"
  console.log(`Valor dentro do bloco: ${a} `) 
}
console.log(`Valor fora do bloco: ${a}`) 
// TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode
const a = "Oi"
function exibir() {
  a = "Estou dentro da função!"
  console.log(a)
}

exibir()
console.log(`Valor fora do bloco: ${a}`) 
// TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode


Resumindo

let:
NÃO PODE ser redeclarada no MESMO escopo
PODE ter seu valor atualizado

const:
NÃO PODE ser redeclarada no MESMO escopo
NÃO PODE ter seu valor atualizado

Top comments (0)