Entenda a diferença entre var, let e const no JavaScript

Declarar variáveis é uma das primeiras coisas que aprendemos quando estamos iniciando em alguma linguagem de programação, e isso não é diferente no JavaScript. Antigamente, usávamos a palavra chave var para declarar todas as variáveis em nosso código. Isso mudou em 2015, quando a marcante versão ES2015 (ES6) foi lançada e mudou grande parte da linguagem JavaScript.

Com esta versão foram introduzidos dois novos identificadores para variáveis: let e const. E agora que possuímos três opções de declaração para cada variável, pode ser que não saibamos ao certo qual delas usar em cada caso.

Por isso, neste artigo explicaremos a definição de cada uma delas, para facilitar a escolha entre as três. Vamos lá!

var - A maneira mais antiga

Para declarar uma variável com var é bem simples. Podemos ver um exemplo abaixo:

var company = 'Hcode Treinamentos';

console.log('Minha empresa se chama ' + company);

Note que definimos um valor para a variável e declaramos que o seu valor deverá ser exibido no console. Ao executar este código, vemos o seguinte resultado:

O código funcionou corretamente.

Contudo, a grande peculiaridade de uma variável var é o escopo de sua atuação, ou seja, o limite de até onde ela será “enxergada”. Todas as variáveis criadas fora de funções ou outros blocos de código possuem um escopo global.

Mas uma variável declarada com var possui o que chamamos de escopo de função. Isso significa que se criarmos uma variável deste tipo dentro de uma função, sua referência poderá ser identificada e modificada em qualquer parte desta função, mesmo que criemos outros escopos dentro dela, como um bloco if(), switch() ou for(). Isso pode implicar alguns problemas. Vamos ver um exemplo disto.

Vamos criar uma função que irá retornar o nome de duas montadoras de carro. O código será o seguinte:

function returnCar() {

    var car = 'Land Rover';

    if (car === 'Land Rover') {

        var car = 'Ferrari';

        console.log('Dentro do if: ' + car);

    }

    console.log('Fora do if: ' + car);

}

returnCar();

Note que redefinimos a variável car dentro do if(), que é um novo escopo. Será que ele irá interferir no escopo principal da função? Vamos ver. O resultado deste código será o seguinte:

Note que “Ferrari” foi retornada nos dois casos, tanto dentro como fora do if(). Ou seja, a variável criada dentro do if() sobrescreveu a variável da função, mesmo elas sendo de blocos de código diferentes.

Entretanto, não concorda que muitas vezes declaramos uma variável em um bloco de código para um objetivo específico? Então, depois de realizar o que queremos, ela pode ser desconsiderada.

Até por que o exemplo acima representa uma função pequena. Mas imagine que nosso projeto estivesse gigante e porventura essa sobrescrita ocorresse. Até descobrir o problema demoraria muito.

Para resolver essa questão podemos usar o let.

let - Levando em conta o escopo de cada bloco de código

Um variável declarada com let leva em conta, não a função onde foi criada, mas sim o bloco de código de sua origem. Isso significa que se a declararmos dentro de um if(), switch() ou for(), ela será “enxergada” apenas dentro desta parte do código, dentro deste escopo específico.

Vamos ver como ficaria o código da função returnCar() com o let:

function returnCar() {

    let car = 'Land Rover';

    if (car === 'Land Rover') {

        let car = 'Ferrari';

        console.log('Dentro do if: ' + car);

    }

    console.log('Fora do if: ' + car);

}

Agora, ao realizar a chamada desta função, veremos o seguinte resultado:

Note que agora a string “Ferrari” só foi identificada dentro do if(). Fora dele a string “Land Rover” continuou a ser identificada, que era o que esperávamos.

Podemos perceber assim que usar o let nos ajuda a evitar confusões no código quanto ao escopo de execução.

Vamos ver mais um exemplo sobre essa diferença com outro recurso que usamos bastante: laços de repetição.

Imagine que queremos criar um for() que irá exibir os anos da década de 2000. Contudo, iremos definir um console.log() fora deste laço também, para conferir o índice final, da seguinte forma:

for (var i = 2000; i <= 2010; i++) {

    console.log(i);

}

console.log('Índice fora do laço de repetição: ' + i);

Ao executar este código, veremos o seguinte resultado:

Os anos foram corretamente exibidos, mas o índice foi reconhecido fora do for(), com o valor “2011”. Mas, como já falamos, isso não faz muito sentido.

Vamos testar o mesmo código, mas agora com o let:

for (let i = 2000; i <= 2010; i++) {

    console.log(i);

}

console.log('Índice fora do laço de repetição: ' + i);

Os anos serão exibidos da mesma forma, mas o último console irá retornar o seguinte erro:

O erro informa que a variável i não foi identificada. Isso ocorreu pois essa variável só é reconhecida dentro do for(), que é o nosso objetivo de fato. Isso inclusive ajuda nosso código a ficar mais leve.

Levando em conta tudo isso, é recomendado que sempre escolhamos usar let em vez de var.

Hoisting - Como é aplicado no var e let

Uma outra diferença entre var e let é o processo de Hoisting. Esse processo ocorre em todas as variáveis no JavaScript. Essa expressão significa “Içar” ou “Elevar”. Assim, todas as variáveis declaradas no JavaScript são elevadas para o início de nosso código quando ele é executado.

Isso nos permite realizar algo bem interessante. Por exemplo, veja o código abaixo:

number = 2;

var number;

console.log('O número é ' + number);

Note que manipulamos o valor da variável number antes de declará-la. Na sua opinião, esse código irá funcionar? Vamos ver o resultado que é exibido no console:

O código funcionou corretamente, pois “por debaixo dos panos” a variável number foi “içada” para o início do código quando ele foi executado.

Vamos agora fazer o mesmo com o let:

number = 3;

let number;

console.log(number);

Será que irá funcionar da mesma forma? Neste caso, vemos o seguinte resultado:

Nosso código não funcionou. A variável number sofreu o hoisting da mesma forma. Entretanto, como ela foi declarada com o let, não foi inicializada, como ocorre com o var.

Assim, se desejarmos manipular o valor de uma variável let, somos obrigados a declará-la previamente.

Essa é outra diferença entre var e let.

const - Criando variáveis constantes

Nossa última maneira de declarar uma variável é por meio de const, usada para definir uma constante. Talvez pensemos: “Mas como é possível usar uma declaração de variável para criar uma constante?”

Isso pode parecer não ter sentido. Entretanto, declarar uma variável como const não significa necessariamente que seu valor não pode ser mudado. Significa que não podemos sobrescrever o seu identificador. Vamos entender isso melhor.

Vamos criar uma constante que irá conter o valor do IP de nosso site:

const IP = '127.0.0.1';

console.log(IP);

Ao executar o código acima, veremos o seguinte resultado:

O valor da constante foi corretamente retornado.

Entretanto, vamos tentar redefinir o valor dela. Iremos usar o seguinte código para isso:

const IP = '127.0.0.1';

IP = '192.168.0.1';

console.log(IP);

Se tentarmos executar este código, veremos o seguinte resultado:

Note que agora um erro foi retornado, informando que não podemos redefinir o valor de uma variável constante. Isso é de fato o que esperamos de uma constante.

Mas, se nossa constante for um objeto ou um array, podemos alterar suas propriedades. Vamos ver um exemplo.

Vamos criar uma constante que irá conter os valores de acesso administrativo:

const USER_ADMIN = {
    name: 'Ronaldo Braz',
    login: 'root'
};

Vamos alterar o valor da propriedade login, com o código abaixo:

USER_ADMIN.login = 'admin';

Ao executar console.log(USER_ADMIN), veremos o seguinte resultado:

Agora o código funcionou normalmente e a propriedade login foi alterada. Essa é uma ressalva sobre as variáveis constantes no JavaScript.

Uma outra regra interessante sobre constantes é que devemos obrigatoriamente definir um valor para ela quando a declararmos, diferentemente do que ocorre com o var e let. Imagine que simplesmente informamos o identificador de uma constante, como no código abaixo:

const SITE;

Se executarmos o código, veremos o seguinte erro:

Note que o erro informa que não definimos um valor para a constante em sua declaração.

Conclusão

Neste artigo aprendemos a diferença entre var, let e const. Esperamos que esse conhecimento possa te ajudar quando precisar escolher entre essas três declarações de variáveis.

Lembrando que falamos sobre variáveis e muitos outros conceitos do JavaScript em nosso Curso Completo de JavaScript e também no Hcode Lab, nosso Programa de Formação de Desenvolvedores.

Obrigado por ter lido até aqui e até o próximo artigo :)