JavaScript 6: diferença entre var, let e const

Na maioria das linguagens de programação, o escopo das variáveis locais é vinculado ao local (bloco) onde elas são declaradas. Sendo assim, elas “morrem” ao fim da instrução em que estão sendo executadas. Vejamos o exemplo em JavaScript abaixo:

var exibeMensagem = function() {
     mensagem = "MATERA";
     console.log(mensagem);
     var mensagem;
}

Observe que estamos declarando a variável “mensagem” apenas depois de atribuir um valor e exibí-la no log, será que funciona? Vamos testar!

exibeMensagem(); // Imprime “MATERA”

Como é possível usar uma variável antes mesmo de declará-la? Será que o escopo é garantido apenas dentro de onde a variável foi criada? Vamos verificar:

var exibeMensagem = function() {
     var mensagemForaDoIf = "MATERA";
     if(mensagemForaDoIf == "MATERA") {
          var mensagemDentroDoIf = "JavaScript";
     }
     console.log(mensagemForaDoIf); // MATERA
     console.log(mensagemDentroDoIf); // JavaScript
}

Estamos declarando duas variáveis em blocos de código diferentes, qual será o resultado? Vamos testar:

exibeMensagem(); // Imprime “MATERA” e “JavaScript”

Por que será que isso está acontecendo?

Em JavaScript, toda variável que é declarada com a palavra-chave var é “elevada” (hoisting) até o topo do contexto de execução. No nosso exemplo acima, como a variável está dentro de uma function, a declaração da mesma é elevada (hoisting) para o topo do contexto, ou seja, para o topo da function. É por esse mesmo motivo que é possível usar uma variável antes dela ter sido declarada: em tempo de execução a variável será elevada (hoisting) e tudo funcionará corretamente.

Vamos imaginar agora que nosso código contenha muitas linhas e que sua complexidade não seja algo tão fácil de compreender, ter que lidar com o hoisting pode confundir a cabeça até de programadores mais experientes.

Foi pensando em trazer o escopo de blocos (tão conhecido em outras linguagens) que o ECMAScript 6 destinou-se a disponibilizar essa mesma flexibilidade (e uniformidade) para a linguagem. Através da utilização da palavra-chave let podemos declarar variáveis com escopo de bloco e portanto, evitamos o hoisting.

A utilização da palavra-chave let
A partir do JavaScript 6, além de podermos utilizar a palavra-chave var na declaração de variáveis, também podemos utilizar a palavra-chave let. A diferença entre elas é que quando utilizamos let, estamos atribuindo escopo de bloco à variável sendo criada e, portanto, não ocorre o hoisting:

var exibeMensagem = function() {
     var mensagemForaDoIf = "MATERA";
     if(mensagemForaDoIf == "MATERA") {
          let mensagemDentroDoIf  = "JS";
          console.log(mensagemDentroDoIf); // imprime JS
     }
     // mensagemDentroDoIf não é mais acessível a partir deste ponto
     console.log(mensagemForaDoIf); // imprime MATERA

     // apenas mensagemForaDoIf existe nesse ponto
}

Qual será a saída do código acima?

exibeMensagem(); // Imprime “JS” e depois “MATERA”

No exemplo acima, utilizamos a palavra-chave let na declaração da variável “mensagemDentroDoIf” para dar o escopo de bloco a mesma. Quando a instrução do if é encerrada, as variáveis locais que foram declaradas dentro de seu corpo são descartadas (escopo de bloco), portanto não conseguimos ter acesso a elas fora do bloco do if.

Constantes

Podemos declarar uma variável como constante através da palavra-chave const. Mas o que é uma constante? Uma vez que tenha sido atribuído um valor à uma variável que tenha sido declarada usando a palavra-chave const, seu valor não pode ser alterado. Por esta razão, todas as constantes devem obrigatoriamente ser inicializadas na declaração. Por exemplo:

// constante válida
const idade = 18;

// constante inválida: onde está a inicialização?
const pi;

No código acima temos o exemplo de uma constante idade sendo declarada e inicializada na mesma linha (constante válida) e um outro exemplo onde o valor não é atribuído na declaração (constante inválida). Além disso, constantes também tem escopo de bloco, assim como as variáveis declaradas com a palavra-chave let. O que acontece se tentarmos mudar o valor de uma variável constante? Vamos testar:

const idade = 18;
idade = 21;

Se tentarmos rodar o código acima, um erro será lançado: constantes não podem ter seu valor alterado.

Conclusão

Vimos neste post o que é elevação de contexto (hoisting) em JavaScript. Aprendemos a utilizar a palavra-chave let na declaração de nossas variáveis. Passamos pelo conceito de escopo de bloco e vimos como ele pode ser utilizado a partir do ECMAScript 6. Aprendemos também o que são, sua característica imutável e como declarar constantes.

Por OTÁVIO FELIPE DO PRADO

Analista de Sistemas MATERANO, atua no desenvolvimento de software na plataforma Java desde 2012, adora programação e se aventurar no mundo da tecnologia, está sempre buscando evoluir e aprender um pouco a cada dia.

Postado em: 09 de maio de 2017

Confira outros artigos do nosso blog

Indicações de leitura para começar 2019 no “mundo Devops”

15 de março de 2019

André Jesus

Como estar preparado para um Hackathon?

15 de janeiro de 2019

Victor Capone

Inteligência Artificial: uma introdução ao Deep Learning

11 de setembro de 2018

Guilherme Moraes Armigliatto

Implementando Circuit Breaker com Spring Cloud Netflix

25 de julho de 2018

Jamila Peripolli Souza

Deixe seu comentário