O que são fechamentos de JavaScript e como você os escreve?

JavaScript é uma das linguagens de programação mais complicadas de dominar. Às vezes, mesmo os desenvolvedores sênior não são capazes de prever a saída do código que escreveram. Um dos conceitos mais confusos em JavaScript são os encerramentos. Iniciantes geralmente tropeçam no conceito - não se preocupe. Este artigo o guiará lentamente pelos exemplos básicos para ajudá-lo a entender melhor os fechamentos. Vamos começar.

O que são fechamentos?

Um encerramento é a estrutura de uma função e seu ambiente léxico, incluindo quaisquer variáveis ​​no escopo da função na criação do encerramento. Em termos mais simples, considere uma função externa e uma função interna. A função interna terá acesso ao escopo da função externa.

Antes de examinar alguns exemplos de encerramento de JavaScript, você precisará entender o escopo léxico.

O que é um ambiente lexical?

O ambiente léxico é a memória local junto com seu ambiente pai. Confira o exemplo fornecido abaixo e adivinhe a saída do seguinte código:

function outer () { 

instagram viewer


 deixe a = 10;
 console.log (y);
 interno();
 function inner () {
 console.log (a);
 console.log (y);
 }
}
deixe y = 9;
exterior();

A saída será 9, 10, 9. A função interna tem acesso às variáveis ​​de seu pai, o exterior() função. Conseqüentemente, o interno() função pode acessar variável a. O interno() função também pode acessar variável y por causa do conceito de corrente de escopo.

O pai da função externa é global, e o pai da interno() função é o exterior() função. Conseqüentemente, o interno() função tem acesso às variáveis ​​de seus pais. Se você tentar acessar a variável uma no escopo global, ele exibirá um erro. Portanto, você pode dizer que o interno() função está lexicamente dentro do exterior() função, e o pai léxico da exterior() a função é global.

Explicação de exemplos de fechamento de JavaScript

Como você aprendeu sobre o ambiente léxico, pode facilmente adivinhar a saída do seguinte código:

function a () {
 deixe x = 10;
 function b () {
 console.log (x);
 }
 b ();
}
uma();

A saída é 10. Embora você possa não adivinhar à primeira vista, este é um exemplo de encerramento em JavaScript. Os fechamentos nada mais são do que uma função e seu ambiente lexical.

Vamos considerar um exemplo em que existem três funções aninhadas umas dentro das outras:

function a () { 
 deixe x = 10;
 function b () { 
 function c () {
 function d () {
 console.log (x);
 }
 d ();
 }
 c ();
 }
 b ();
}
uma();

Ainda será chamado de encerramento? A resposta é sim. Novamente, um encerramento é uma função com seu pai léxico. O pai léxico da função d () é c (), e devido ao conceito de cadeia de escopo, função d () tem acesso a todas as variáveis ​​das funções externas e globais.

Dê uma olhada em outro exemplo interessante:

função x () {
 deixe a = 9;
 função de retorno y () {
 console.log (a); 
 }
}
deixe b = x ();

Você pode retornar uma função dentro de uma função, atribuir uma função a uma variável e passar uma função dentro de um função em JavaScript. Essa é a beleza da linguagem. Você consegue adivinhar qual será a saída se você imprimir a variável b? Vai imprimir a função y (). A função x () retorna uma função y (). Portanto, a variável b armazena uma função. Agora, você pode adivinhar o que acontecerá se você chamar a variável b? Ele imprime o valor da variável uma: 9.

Você também pode conseguir ocultar dados usando fechamentos. Para uma melhor compreensão, considere um exemplo com um botão que possui um id denominado "botão" no navegador. Vamos anexar um ouvinte de evento de clique a ele.

Agora você precisa calcular o número de vezes que o botão é clicado. Existem duas maneiras de fazer isso.

1. Crie uma contagem de variável global e aumente ao clicar. Mas esse método tem uma falha. É fácil fazer modificações nas variáveis ​​globais porque elas são facilmente acessíveis.

   Clique em mim
   
   

2. Podemos alcançar a ocultação de dados usando fechamentos. Você pode envolver todo o addEventListener () função dentro de uma função. Isso faz um fechamento. E depois de criar um fechamento, você pode criar um variável de contagem e incrementa seu valor ao clicar. Usando este método, a variável permanecerá no escopo funcional, e nenhuma modificação pode ser feita.

   Clique em mim
   
   

Relacionado: O herói oculto dos sites: Compreendendo o DOM

Por que os fechamentos são importantes?

Os fechamentos são muito importantes não apenas quando se trata de JavaScript, mas também em outras linguagens de programação. Eles são úteis em muitos cenários onde você pode criar variáveis ​​em seu escopo privado ou combinar funções, entre outros casos.

Considere este exemplo de composição de função:

multiplicação const = (a, b) => a * b;
const multiplyBy2 = x => multiply (10, x);
console.log (multiplyBy2 (9));

Podemos implementar o mesmo exemplo usando fechamentos:

const multiply = function (a) {
 função de retorno (b) {
 retornar a * b
 }
}
const multiplyBy2 = multiply (2);
console.log (multiplyBy2 (10))

As funções podem usar encerramentos nos seguintes cenários:

1. Para implementar currying de função
2. Para ser usado para ocultar dados
3. Para ser usado com ouvintes de eventos
4. Para ser usado no método setTimeout ()

Você não deve usar fechamentos desnecessariamente

É recomendável evitar fechamentos, a menos que seja realmente necessário, porque eles podem reduzir o desempenho do seu aplicativo. Usar o fechamento vai custar muita memória, e se os fechamentos não forem tratados adequadamente, pode levar a perda de memória.

As variáveis ​​fechadas não serão liberadas pelo coletor de lixo do JavaScript. Quando você usa variáveis ​​dentro de fechamentos, a memória não é liberada pelo coletor de lixo porque o navegador sente que as variáveis ​​ainda estão em uso. Portanto, essas variáveis ​​consomem memória e reduzem o desempenho do aplicativo.

Aqui está um exemplo que mostra como as variáveis ​​dentro dos encerramentos não serão coletadas como lixo.

 function f () {
 const x = 3;
 return function inner () {
 console.log (x);
 }
 }
 f () ();

O variável x aqui consome memória, embora não seja usado com frequência. O coletor de lixo não conseguirá liberar essa memória porque ela está dentro do fechamento.

JavaScript é infinito

Dominar o JavaScript é uma tarefa infinita, visto que existem muitos conceitos e estruturas que normalmente não são explorados pelos próprios desenvolvedores experientes. Você pode melhorar significativamente o uso do JavaScript aprendendo o básico e praticando-o com frequência. Iteradores e geradores são alguns dos conceitos que as entrevistas perguntam durante as entrevistas de JavaScript.

Uma introdução aos iteradores e geradores em JavaScript

Pegue o jeito dos métodos iterador e gerador em JS.

Leia a seguir

Sobre o autor