10 – Javascript – Declaração de variável com let e const

Javascript – Declaração de variável com let e const

Voltar para página principal do blog

Todas as aulas desse curso

Aula 09                      Aula 11

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:

Hostinger

Digital Ocean

One.com

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.

Ficamos por aqui e nos vemos na próxima aula, até mais. 🙂

Voltar para página principal do blog

Todas as aulas desse curso

Aula 09                      Aula 11

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:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. 😉