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ção greeting().

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

1. Closures ajudam no encapsulamento de dados, ou seja, você pode armazenar dados em um escopo separado e compartilhá-los apenas quando necessário.
2. 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

1. 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!