Closures em Javascript: O que são e como funcionam?
Closure é um dos conceitos mais procurados e um tópico constantemente abordado em entrevistas de JavaScript. Neste artigo, abordaremos o conceito de closures em JavaScript, como eles funcionam e quais seus benefícios.
De acordo com a Mozilla Developer Network, a definição de closures é a seguinte: “Clouses em javascript é uma habilidade de uma função de lembrar ou acessar eu escopo léxico mesmo quando ela está sendo executada fora de seu escopo léxico.”
Talvez essa explicação pareça um pouco confusa a princípio, para facilitar as coisas, acho importante falar um pouco sobre o que é o escopo léxico.
Para esclarecer o entendimento de closures, é importante esclarecer alguns aspectos do escopo léxico. Claro, se você já sabe do que se trata, pode pular esta parte.
Escopo léxico
A palavra léxico é o mesmo que vocabulário, ou seja, léxico é o conjunto de palavras existente em um determinado idioma, que as pessoas têm à disposição para expressar-se, oralmente ou por escrito em seu contexto.
No JavaScript, o escopo léxico define o escopo de uma variável pela posição dela no código fonte. Por exemplo
A variável name
é uma variável global. Ela pode ser acessada em qualquer lugar, incluindo a função greeting()
.
- A variável
message
é uma variável local, acessível apenas pela funçãogreeting()
.
Se você tentar acessa a variável message
fora da função greeting()
, receberá um erro.
Portanto, o motor JavaScript usa o escopo para gerenciar a acessibilidade da variável.
De acordo com o escopo léxico, os escopos podem ser aninhados e a função interna pode acessar as variáveis declaradas no escopo externo.
Voltemos às Closures…
Uma closure é uma função que se “lembra” do ambiente — ou escopo léxico — em que ela foi criada.
Closures
Agora tentaremos entender essa definição por meio de um exemplo.
Quando a função foo()
é executada, ela retorna a função bar()
que estava armazenada no escopo da função foo()
. Quando a função check()
é executada, o que por sua vez invoca a função bar()
, vemos que “javascript” é impresso.
Isso ocorre porque a função foo()
quando é executada forma uma closure com o nome da variável e quando a função é executada, o JavaScript tentará encontrar o nome da variável definida no escopo da função.
Quando o JavaScript não consegue encontrar o nome da variável em seu escopo, ele tentará pesquisar o nome da variável em seu escopo externo imediatamente e assim por diante.
Depois disso, a função bar()
irá lembrar o nome da variável e seu valor mesmo quando for executada em um escopo diferente.
Vamos verificar isso com outro exemplo.
Aqui, o nome da variável não é encontrado no escopo da função foo()
e portanto, o JavaScript o pega de um escopo superior.
Pois bem, agora vamos tentar ir um pouco mais além.
Como podemos observar aqui, a função foo()
"se liga" com a variável count e tende a lembrar de seu valor. Conseqüentemente, obtemos um valor incrementado de contagem da variável para cada invocação da função bar()
.
Agora vamos para outro exemplo, combinando os dois conceitos descritos anteriormente.
Como é evidente, a função bar()
se une com a variável count e tende a se lembrar dela. Portanto, na última linha, vemos que a função check()
é impressa e o seu valor é igual a 7.
Vantagens de implementar Closures
- Closures ajudam no encapsulamento de dados, ou seja, você pode armazenar dados em um escopo separado e compartilhá-los apenas quando necessário.
- Bibliotecas JavaScript modernas (como Angular, React e Vue) dependem fortemente de closures para renderizar componentes na mudança de estado ou propriedades (props).
Desvantagens de implementar Closures
- Closures consomem muito espaço em memória, pois as funções precisam armazenar o valor da variável na memória, mesmo que a função da própria variável não seja usada várias vezes no código.
O escopo léxico descreve como o motor JavaScript usa a localização da variável no código para determinar onde essa variável está disponível.
Uma closure é uma combinação de uma função e sua capacidade de lembrar variáveis no escopo externo.
Closures sem dúvida podem parecer confusas a princípio, mas espero que essa breve explicação tenha feito com que você perceba melhor como elas funcionam.
Obrigado por ler. Sinta-se à vontade para deixar comentários e sugestões.
Isso é tudo pessoal!