O que é uma variável?
Variáveis JavaScript são objetos onde nós guardamos uma informação apenas em tempo de execução. Por exemplo: se você digita sua data de nascimento em um formulário, podemos guardar essa data em uma variável para calcular a sua idade. Mas se você sair do site e voltar, sua data de nascimento não estará lá automaticamente.
Um conceito importante sobre variáveis é que ao defini-la, estamos reservando um espaço na memória do computador. No caso de JavaScript, como nossas aplicações rodam em navegadores, estamos utilizando a memória deles. Sabe quando você acessa um site que seu Chrome fica uma lerdeza que só? Pode ser uma aplicação com uma gestão ruim da alocação de memória.
- O que é uma variável?
- Variáveis JavaScript
- Hoisting
- Declarando variáveis com var
- Declarando variáveis com let
- Declarando variáveis com const
- Conclusão
Variáveis JavaScript
Como já falamos na introdução ao JavaScript, a tipagem no JavaScript é dinâmica, e portanto não precisamos dizer se aquela variável espera receber uma string, um número, um array ou outro. O JavaScript se vira com a informação que você inserir.
Hoisting (içar)
Em linguagens como C por exemplo, todas as declarações deveriam vir no início do programa, correto? Com o tempo, começou a se pensar, porque não poderíamos fazer as declarações em qualquer lugar do código e o compilador se virar?
Assim foi concebido o conceito de Hoisting, que é o seguinte: os compiladores (ou até linguagens runtime) leem todas as funções e variáveis que estão declaradas no código antes de executá-lo. No momento em que ele vai executar o código, ele já sabe onde está o quê.
Por esse motivo, em JavaScript é possível você usar uma variável antes mesmo de defini-la.
No nosso exemplo acima, como a variável mensagemDentroDoIf está dentro de uma function, a declaração da mesma é elevada (hoisting) para o topo do seu contexto, ou seja, para o topo da function.
É por esse mesmo motivo que “é possível usar uma variável antes dela ter sido declarada”. Pois em tempo de execução a variável será elevada (hoisting) e tudo funcionará corretamente.
Declarando variáveis com var
Quando declaramos uma variável com var, por padrão essa variável é iniciada com undefined (caso você não atribua nenhum valor ao mesmo tempo).
Adicione a complexidade da utilização do hoisting e tempos um problema: quanto mais complexo for o código, mais difícil é entender o escopo das variáveis declaradas com var.
Declarando variáveis com let
Let foi um conceito trazido na versão ES6 do JavaScript, para a criação de escopo de bloco assim como em outras linguagens. Em resumo, let é uma forma de criar variáveis sem hoisting.
Aqui vai um conselho, não use mais var. Fica bem mais simples de entender o escopo das variáveis, além de não ficar alocando memória do navegador sem necessidade. Let não é o futuro, é o presente. Let hoje, let amanhã let pra sempre!
Declarando variáveis com const
Mais um recurso trazido no ES6. Const é utilizado para criar variáveis imutáveis, ou seja variáveis que não podem ter seu valor alterado. Usar const garante que ao utilizar a variável ela estará iniciada com um valor diferente de undefined.
Const também tem escopo de bloco, mas o mais interessante, é que o valor de uma const não pode ser alterado.
Conclusão
Sempre que possível não utilize var. Observe atentamente os locais que você deve usar let e assim que possível abuse de const.
Existe um debate interessante sobre variáveis JavaScript no Github, no fórum do @frontendbr: Existe alguma razão para usar ‘var’ a partir do ES6?