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

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

Iniciando com o POSTMAN

17 de abril de 2017

Arthur Fritz Santiago

Deixe seu comentário