JavaScript: O que são Closures

Closure (“clausura” em português) é uma função que tem acesso as variáveis do escopo pai, ou seja, do “escopo léxico” que ela está contida (ex: o corpo de uma função, um bloco delimitador). O closure tem três cadeias de escopo: o seu próprio escopo; escopo externo, tendo acesso as variáveis da função exterior; e o escopo que tem acesso as variáveis globais.

Em JavaScript apenas funções possuem um novo contexto léxico.

Um exemplo clássico de um Closure é a criação de um contador sem o uso de uma variável global. Por ex:

Se você tentasse fazer algo do tipo:

Você poderia pensar que o valor de counter no final seria 3. Mas não, ele será sempre 1.

Mas se retornarmos um “função” no lugar de “counter”, teremos assim nossa closure.

Dessa forma a variável add possui a função function () {return counter += 1;} com acesso ao escopo da função pai (onde foi declarado a variável counter).

Portanto quando chamamos add(),  estamos chamando a função function () {return counter += 1;}, que por sua vez incrementa a variável ‘counter’.

Não muito semelhante, mas equivalente, algo parecido, também possibilita ter funções com variáveis privadas, como no exemplo abaixo:

Como demonstrado no exemplo acima, a variável private,  “vive” apenas dentro da função e apenas de lá que seu valor pode ser acessado e alterado.

Closure para fazer currying

Currying é uma técnica para transformar uma função que recebe múltiplos parâmetros em uma outra com muito menos parâmetros.

Outra explicação muito boa retirada do insubstituível stackoverflow:
“Currying” é um função que “captura” alguns parâmetros para outras funções e retorna uma função (uma “closure”) que aceita o restante dos parâmetros.

Imagine a função greet:

Com um pequeno ajuste poderíamos fazer uma função para cumprimentar qualquer pessoa sem ter que passar o valor “Hello” para o argumento novamente.

Valeu, ;)

Abaixo segue as fontes de onde me inspirei para fazer este post:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Closures
https://www.w3schools.com/js/js_function_closures.asp
https://pt.stackoverflow.com/questions/1859/como-funcionam-closures-em-javascript/1860#1860
https://www.turbosite.com.br/blog/entenda-o-que-sao-closures-em-javascript/
https://www.sitepoint.com/currying-in-functional-javascript/ 

  • Deepak

    Muito bom, parabéns!

    • Mateus Pádua

      Valeuuuuu jovem