As diferenças de var, let e const

Neste artigo veremos quais são as diferenças nestas três formas de declarar valores, e também casos de uso para var, let e const.

Este conteúdo está disponível também em vídeo:

Antigamente tinhamos apenas uma forma de declarar variáveis, e hoje ainda é a mais conhecida, a famosa: var

Porém com a vinda do ES6 temos novas possibilidades, alguns de vocês já devem ter ouvido falado, e os nomes das crianças  são let e const

O que é let?

Como já sabemos é uma forma de definir uma variável, porém a grande diferença para var é que podemos limitar o escopo para um bloco

Diferente do var que é definido globalmente no escopo de funções apenas, let pode ter um valor diferente dentro de cada bloco

Entenda bloco por tudo que está entre { }

Talvez no começo pareça confuso, mas vamos a alguns exemplos, primeiramente com var:

// exemplos var
var nome = 'João';

console.log('Meu nome é: ', nome); // Meu nome é:  João

function sayMyName() {
    var nome = 'Pedro';
    console.log('Meu nome é :', nome); // Meu nome é : Pedro
}

sayMyName();

console.log(nome); // João

Bom, aqui deve ser óbvio para você, mas como explicado anteriormente o escopo de var é limitado por um bloco de função

Ou seja, criando uma variável com exatamente o mesmo nome dentro de uma função e atribuindo ela para um valor diferente da declarada no escopo global da aplicação, não altera no valor da primeira

Assim sendo o limite de uma variável é o bloco de uma função, então vamos ver um outro caso:

if(true) {
    var nome = 'Kléber';
    console.log('Meu nome é: ', nome); // Meu nome é:  Kléber
}

console.log('Meu nome é: ', nome); // Meu nome é:  Kléber

for(i = 0; i < 3; i++) {
    var nome = 'Vitor';
    console.log('Meu nome é: ', nome ); // Meu nome é:  Vitor
}

console.log('Meu nome é: ', nome ); // Meu nome é:  Vitor

Agora de forma diferente adicionamos elementos como if e um for, que não são funções, a variável nome é alterada por todos eles

Entenda que funções, no JavaScript, são elementos de bloco que tem um escopo separado do fluxo da aplicação

Já if, for, while e etc, são elementos de bloco porém compartilham o mesmo escopo, explicando assim porque a variável nome é alterada

Então agora vamos ver caso a caso com let:

let meuNome = 'João';

console.log('Meu nome é: ', meuNome); // Meu nome é:  João

function sayMyName() {
    let meuNome = 'Pedro';
    console.log('Meu nome é :', meuNome); // Meu nome é : Pedro
}

sayMyName();

console.log(meuNome); // João

Nessa parte fica exatamente igual a var, por que a função é um elemento de bloco

Então let mantem os valores para cada bloco

Agora veja o próximo:

if(true) {
    let meuNome = 'Kléber';
    console.log('Meu nome é: ', meuNome); // Meu nome é:  Kléber
}

console.log('Meu nome é: ', meuNome); // Meu nome é:  João

for(i = 0; i < 3; i++) {
    let meuNome = 'Vitor';
    console.log('Meu nome é: ', meuNome ); // Meu nome é:  Vitor
}

console.log('Meu nome é: ', meuNome ); // Meu nome é:  João

Dentro dos blocos if e for a variável meuNome é alterada, porém perceba que fora dela o valor é o mesmo do início do do primeiro exemplo

Aqui vemos a real diferença de let, que separa cada valor de variável por elementos de bloco, ou seja, tudo que estiver entre { }

E por fim podemos declarar let dentro de um loop sem também interferir no contexto global, veja:

let j = 0;

for(let j = 10; j > 0; j--) {
    console.log('j agora é :' + j);
}

O primeiro j não tem nada a ver com o segundo, que foi criado como contador de índice, para auxiliar o fim do for

O que é const?

Quando declaramos um valor com const ele não pode ser alterado ao longo do código, 

Outras linguagens que você já utilizou provavelmente tinham como declarar uma constante, e a do JavaScript tem o conceito igual a estas outras, o valor é imutável

Além disso o nome é único, ou seja, pode ser declarado apenas uma vez uma, caso você declare algo com o mesmo nome receberá um erro

Uncaught SyntaxError: Identifier 'teste' has already been declared

Outra particularidade das constantes é que devem ser iniciadas com algum valor, se não, novamente recebemos um erro (por motivos óbvios :D), que é o seguinte:

Uncaught SyntaxError: Missing initializer in const declaration

Sabendo agora a forma correta de declarar, vamos ver outras particularidades

Elas se comportam semelhante ao let, trabalhando dentro do bloco declarado, ou seja, entre { } não afetarão as outras fora do bloco, veja:

const teste = 1;

if(true) {
    const teste = 2;
    console.log(teste); // 2
}

console.log(teste); // 1

Então entendendo como let funciona, você também sabe como funciona o const

A grande diferença é que seu valor não pode ser alterado! 🙂

Nunca mais vou usar var na vida?

Vou citar aqui alguns argumentos para não utilizar var em códigos que utilizem o ES6, veja:

• Nenhum erro é retornado se você declara uma variável com o mesmo nome, com let e const você recebe um erro;
• var não tem escopo de bloco, ou seja, em códigos maiores é difícil de manter;
• Não vi caso algum que var seja extremamente necessário, sempre podemos trocar para let ou const;

Então agora fica a seu critério! 😀

Repositório

Você pode encontrar todo o código utilizado aqui!

Conclusão

Vimos que no ES6 temos duas maneiras de declarar valores

Primeiramente let, que é o mais próximo do antigo var porém com algumas diferenças como: escopo de bloco, só podemos declarar uma única vez com o mesmo nome (no mesmo escopo), o que deixa o código mais fácil de manter e organizado

E depois const, que são as conhecidas constantes das outras linguagens, que mantém o valor para sempre no seu escopo, e herda o mesmo que escopo de let, ou seja, de bloco

E esta última devemos sempre declarar com algum valor inicial e seu nome deve ser único!

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Obrigado por lerem pessoal, até o próximo post. 🙂