Hoisting
Antes de falarmos sobre hoisting é importante lembrar como funciona escopo em JavaScript. Escopo nada mais é do que um contexto criado para os valores e expressões terem sua validade. Em JavaScript o escopo é criado com a declaração de funções. Vamos a um exemplo:
No exemplo acima temos o seguinte: A variável “num” foi declarada com o mesmo nome em 2 lugares diferentes: No escopo global e no escopo criado pela função imprimir. Por elas estarem em escopos diferentes, não tem problema terem o mesmo nome.
Mas cuidado! As variáveis declaradas sem a palavra reservada “var” passam a ser parte do escopo global. Olha só:
Uma das boas praticas em JavaScript é sempre declarar as variáveis com a palavra reservada ‘var’ para conter o valor em seu escopo local e manter o escopo global limpo.
Legal, agora que já relembramos o escopo em JavaScript vamos entender o que é o hoisting.
Hoisting pode ser traduzido como levantar, erguer ou içar.
Esse comportamento na linguagem JavaScript vale para funções e variáveis. Vamos falar primeiro sobre o hoisting de variáveis. Quando declaramos uma variável em JavaScript a mesma é erguida, ou hoisted, para o topo do escopo, no caso de variaveis somente a sua declaração é levada para o topo do escopo mas sua inicialização não. Por exemplo:
O valor da variável sobreNome é undefined, ou seja, ela esta sendo considerada na função mas o seu valor não.
E é assim que funciona o hoisting de variável. 😉
No caso de funções o hoisting ocorre de um jeito diferente. Tanto a sua declaração quanto o seu escopo é içado
para o topo. Olha que interessante:
Sim, a função foi executada antes da sua declaração por conta do hoisting. Porém, aqui vale um lembrete, uma das formas de declaramos funções em JavaScript é armazenando elas em variáveis, nesse caso a regra para hoisting em variáveis entra em cena novamente. Vamos ver o que o nosso exemplo anterior retornaria neste caso:
Declarando a função desta forma o JavaScript retorna um erro dizendo que “nome” não é uma função.
Closure
A tradução para a Closure em português seria clausura que quer dizer confinamento ou ambiente fechado. Para conseguir esse confinamento basta declarar uma função dentro de outra, a função externa confina a função interna.
O confinamento acontece por conta da regra do JavaScript referente a escopo. Sabemos que o escopo é criado por funções, isso quer dizer que a função externa cria um escopo em que a função interna fica confinada podendo ser executada somente dentro desse escopo. As variáveis e parâmetros da função externa podem ser acessados pela função interna.
Vamos a um exemplo:
Acabamos de ver um exemplo de closure em JavaScript, mas ainda temos uma diferença muito bacana na linguagem. Em JavaScript é possível escapar a função interna do seu confinamento. Vamos avaliar o código abaixo:
O return faz com que a função interna seja retornada de forma literal podendo ser executada fora do confinamento.
Variável Global
Variáveis globais são todas aquelas definidas fora de alguma função. Isso porque cada função gera seu próprio escopo. A variável global pode ser acessada por qualquer função. Fizemos isso segundo exemplo.
Todas as variáveis que não forem declaradas com a palavra reservada ‘var’ serão consideradas parte do escopo
global.
Variável por parâmetro
Quando declaramos uma função temos a opção de indicar alguns parâmetros para elas. Tais parâmetros são considerados como variáveis que recebem um valor na hora da execução da função. Esses valores são utilizados dentro da função. Exemplo:
Caso esse parâmetro seja uma variável global o valor dela não se altera. Por exemplo:
Instanciação usando uma IIFE
IIFE é a abreviação para Imediately Invoked Function Expression, que pode ser traduzida para Expressão de Função Invocada Imediatamente. Esse tipo de função é executada no mesmo momento que esta sendo interpretada, veja a sintaxe dela:
Os parenteses que envolvem a função fazem dela uma expressão e os parenteses no final da declaração executa a
função. Esse tipo de função também pode ser armazenada em uma variável. Dessa forma:
Como toda função, a IIFE também pode receber parâmetros. Mas agora pense o seguinte, se ela é chamada imediatamente em tempo de execução, como podemos passar os parâmetros ? Vamos ver:
Bem bacana né ? A IIFE é um partner em JavaScript que evita poluição no escopo global e com ela também é possível modularizar o código e deixar tudo mais organizado.