10 - Javascript - Declaração de variável com let e const
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Meus links de afiliados:
Javascript - Declaração de variável com let e const
Até agora, em todas as aulas usamos o
var para declarar variáveis, ou simplesmente demos um nome a uma variável sem o var mesmo, e atribuímos a ela algum valor.
O
ECMAScript permitia que programadores usassem variáveis sem declará-las.
Com o
ES6, veio a possibilidade de declarar variáveis com
let e
const, para superar um problema do javascript, que se refere ao escopo de variáveis, quando usadas sem declarar, ou quando declaradas com
var.
Escopo de blocos
As variáveis, nas mais variadas linguagens de programação, são vinculadas ao "bloco" em que são declaradas.
Antes do
ES6, com a possibilidade de usar apenas variáveis sem declarar ou usando
var para declará-las, as variáveis ficavam vinculadas apenas a função e não a blocos como:
while,
for,
if, etc.
Veja um exemplo de variável com escopo de função:
function imprimeNumero() {
var num = 35;
console.log("Número: ", num);
}
console.log("Número: ", num);
Erro: num is not defined
Beleza, como esperado, a variável só tá definida dentro da função, como foi dito antes, utilizando
var, a variável fica vinculada apenas a função.
Mas, se eu declarar uma variável dentro de um
for, veja o que acontece:
function imprimeI() {
for(var i = 0; i < 3; i++){
console.log("i dentro do for: ", i);
}
console.log("i fora do for: ", i);
}
Saída:
i dentro do for: 0
i dentro do for: 1
i dentro do for: 2
i fora do for: 3
Veja que o
javascript com a declaração
var, ou simplesmente omitindo o
var, deixa você acessar o valor da variável
i, fora do escopo do
for.
Isso é errado, esse vazamento de escopo pode quebra a lógica do código.
Agora teste usando let ao invés de var:
function imprimeI() {
for(let i = 0; i < 3; i++){
console.log("i dentro do for: ", i);
}
console.log("i fora do for: ", i);
}
Agora funcionou o escopo de bloco do for! ;)
Com
if acontece a mesma coisa.
function imprimeNome() {
if(true){
var nome = "Fulano de Tal";
console.log("Nome dentro do if: ", nome);
}
console.log("Nome fora do if: ", nome);
}
Saída:
Nome dentro do if: Fulano de Tal
Nome fora do if: Fulano de Tal
Agora com o
let
function imprimeNome() {
if(true){
let nome = "Fulano de Tal";
console.log("Nome dentro do if: ", nome);
}
console.log("Nome fora do if: ", nome);
}
Saída:
Nome dentro do if: Fulano de Tal
Uncaught ReferenceError: nome is not defined
at imprimeNome...
Vazamento de escopo
Esses problemas de vazamento de escopo em
for,
while e
if no javascript, foi uma fonte sutil de
bugs e bastante surpresa para o desenvolvedores
C /
C ++ /
Java /
C #.
Além disso, o
ECMAScript nunca teve facilidade para criar variáveis imutáveis semelhantes à
final em
Java ou
const em
C # ou
C ++.
O
ECMAScript 6 corrigiu essas coisas.
Ele sugere substituir o uso de
var por
let, que não pode ser redeclarado.
Ou seja , o
let opera da mesma maneira que
var, mas, não aceita reatribuição, veja abaixo.
var msg = "Um texto qualquer";
var msg = "Olá programador!"; // reatribui um novo valor a msg
let message = 'Essa é uma mensagem!';
// A linha abaixo causa um erro fatal se você remover o comentário
// let message = 'Essa é outra mensagem!';
console.log(msg);
console.log(message);
Removendo o comentário do let message = 'Essa é outra mensagem!' dá o seguinte erro:
Uncaught SyntaxError: Identifier 'message' has already been declared at <anonymous>:1:1
Conclusão e boas práticas
Nunca use
var, sempre priorize
const e se você realmente constatar que uma determinada variável não pode ser
const, troque ela para
let.
Declaração com const
O uso de
const em uma declaração variável aborda a necessidade de imutabilidade.
Uma vez definida, uma variável declarada
const nunca pode ser modificada.
const message = 'Primeira mensagem.';
message = 'Segunda mensagem'; // ERROR!
Enquanto uma variável declarada como
const não pode alterar seu valor, o objeto para o qual a variável aponta não é constante, portanto, ainda pode ser modificado.
const user = {'firstname' : 'Fulano', 'lastname' : 'de Tal'};
user.firstname = 'Beltrano'; // aceitável, altera uma propriedade
// A próxima linha causa um erro fatal se você remover o comentário
// user = {'firstname' : 'Sicrano', 'lastname' : 'da Silva'};
console.log(user);
Removendo o comentário de user = {'firstname' : 'Sicrano', 'lastname' : 'da Silva'}; dá o seguinte erro:
Uncaught TypeError: Assignment to constant variable. at <anonymous>:1:6
Ou seja, para mudar um
const, só mesmo acessando o atributo via ponto(
.), exemplo,
user.firstname.
Se quiser alterar usando
user = {'firstname' : 'Sicrano'...} dará erro.
Conclusão
O que devo usar então?
O melhor é usar o
const sempre que puder.
Caso dê algum erro no seu código tipo: essa variável não pode ser alterada
Você pode alterar a declaração da variável
const que tá dando problema, para
let.
Nunca use
var e nem declare a variável só com o nome dela, isso será a mesma coisa que utilizar
var.
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
