Quando falamos em Javascript é normal vir à cabeça algumas das peculiaridades da linguagem, e, para iniciantes, muitas coisas parecem tão bicho de sete cabeças; por exemplo, as opções de declaração de variáveis.
No início eu também me perguntava o porquê de existir as palavras chave var, let e const para declaração de variáveis, como e quando usá-las.
Pois bem, vamos tentar entender os conceitos e usos, mas antes vamos falar do famoso hoisting.
Hoisting
Em Javascript, todas as variáveis sofrem hoisting — são içadas/elevadas — ao topo do contexto de execução no qual elas estão.
Então, por esse motivo é possível usar uma variável antes dela ter sido declarada — não confunda com usar sem declarar, isso daria erro —, pois em tempo de execução a variável sofrerá hoisting — será elevada — e tudo funcionará como esperado.
Conceito de hoisting entendido até agora, certo?
Os tipos de variáveis
var
Esta é a forma mais antiga, mais utilizada e atualmente menos recomendada, porém a única que 100% dos browsers entende.
Declarações com var não ficam no escopo de bloco, mas sim de função, ou global como podemos ver a seguir:
À primeira vista e em pequenos projeto isso pode não parecer um problema, mas imagine um grande projeto onde precisa de uma variável apenas em um certo escopo, de bloco por exemplo. Quando a variável for içada teremos um problema, estaremos para sempre ocupando espaço em memória que só vai ser útil em uma parte do código.
Para resolver esse problema de escopo, foi implementada a keyword let.
let
Vamos revisar usando a mesma ideia do código anterior:
Opa, agora se rodarmos o código teremos um erro similar a:
Uncaught SyntaxError: Identifier 'test' has already been declared at line 16 col 5
Opa, aqui diz que a variável test que tentamos declarar na linha 16 já existe, então vamos só tirar o let da linha 16.
Agora temos outro erro, dessa vez do tipo:
Uncaught ReferenceError: stringTest is not defined at line 3 col 15
Este erro diz que a variável chamada na linha 3 não foi definida.
Vamos comentar a linha 3 e agora temos o mesmo erro, mas na linha 11 a qual também vamos comentar.
Ok, vimos que fora do escopo de if(){} a variável stringTest sempre dá erro de referência.
Beleza, problema de escopo resolvido. Agora a variável só existe no escopo onde foi definida, e morre no final dele.
Mas dependendo do que queremos fazer, ainda temos um problema, o valor da variável continua sendo sobrescrito na linha 16. Pensando nisso, também foi implementado a const.
const
Com ela declaramos uma variável cujo valor/tipo nunca pode ser alterado programaticamente e também segue o conceito de escopo como a let como podemos ver no exemplo a seguir:
Ao rodar, teremos um erro de referência similar a:
Uncaught ReferenceError: stringTest is not defined at line 7 col 15
Vamos comentar a linha 7 e ver o erro mudar para um TypeError na linha 12.
Isso quer dizer que agora não podemos sobrescrever a variável — agora constante — test.
JS é mesmo ótimo, não?
Quando devo usar cada um?
Isso depende do seu projeto porém em todo caso onde a variável pode sofrer alteração, é aconselhável o uso de let.
Se precisa que um valor sempre se mantenha, use a const.
Se precisar de alta compatibilidade entre browsers mais antigos, a var.
Finalização
Ok, espero que até aqui esteja tudo entendido.
Um abraço e até a próxima.
Caso tenha dúvidas, pode colocar nos comentários.