Compreendendo os encerramentos JavaScript em loops: exemplos práticos

Resolvendo problemas de fechamento em loops JavaScript com let

JavaScript (ES6)

let funcs = [];
// Let's create 3 functions
for (let i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value:", i);
  };
}
for (let j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Garantindo valores de fechamento corretos em código assíncrono

JavaScript (ES6)

const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (let i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

Fechamento correto em ouvintes de eventos usando IIFE

JavaScript (ES6)

var buttons = document.getElementsByTagName("button");
// Let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  (function(i) {
    buttons[i].addEventListener("click", function() {
      // each should log its value.
      console.log("My value:", i);
    });
  })(i);
}

Fechamento correto com loops for...in e for...of

JavaScript (ES6)

const arr = [1, 2, 3];
const fns = [];
for (const i in arr) {
  fns.push(((i) => () => console.log("index:", i))(i));
}
for (const v of arr) {
  fns.push(((v) => () => console.log("value:", v))(v));
}
for (const n of arr) {
  const obj = { number: n };
  fns.push(((n, obj) => () => console.log("n:", n, "|", "obj:", JSON.stringify(obj)))(n, obj));
}
for (const f of fns) {
  f();
}

Perguntas frequentes sobre fechamentos de JavaScript

1. O que é um fechamento em JavaScript?
2. Um encerramento é uma função que retém acesso ao seu escopo léxico, mesmo quando a função é executada fora desse escopo.
3. Por que os fechamentos ocorrem em loops?
4. Os fechamentos em loops ocorrem porque o loop cria funções que capturam a mesma referência de variável, levando a um comportamento inesperado se não for tratado corretamente.
5. Como podemos corrigir problemas de fechamento em loops?
6. Usando let em vez de var em loops ou usando IIFE (Expressões de função invocadas imediatamente) podem corrigir problemas de fechamento criando um novo escopo para cada iteração.
7. O que é um IIFE?
8. Um IIFE é uma função executada imediatamente após ser criada, geralmente usada para criar um novo escopo e evitar conflitos de variáveis.
9. Os fechamentos podem ser usados ​​na programação assíncrona?
10. Sim, os encerramentos são essenciais na programação assíncrona para manter o estado e o contexto em operações assíncronas, como promessas e retornos de chamada.
11. O que é memoização e como os encerramentos ajudam?
12. Memoização é uma técnica de otimização para armazenar em cache os resultados de chamadas de funções caras. Os fechamentos ajudam a reter o acesso ao cache em várias chamadas de função.
13. Como os fechamentos ajudam no tratamento de eventos?
14. Os encerramentos retêm o estado das variáveis ​​necessárias aos manipuladores de eventos, garantindo que funcionem corretamente quando o evento for acionado.
15. Qual é o padrão de módulo em JavaScript?
16. O padrão de módulo usa fechamentos para criar variáveis ​​e funções privadas, encapsulando funcionalidades e evitando a poluição do escopo global.
17. Os encerramentos podem simular métodos privados em JavaScript?
18. Sim, os encerramentos podem simular métodos privados mantendo variáveis ​​e funções acessíveis apenas dentro do escopo da função onde estão definidas.

Considerações finais sobre fechamentos de JavaScript em loops

Dominar os encerramentos em JavaScript, especialmente dentro de loops, é crucial para escrever código previsível e eficiente. Ao aproveitar let, Promises, e IIFE, os desenvolvedores podem evitar armadilhas comuns e garantir o escopo correto das variáveis. Esse entendimento aprimora a capacidade de lidar com tarefas assíncronas e programação orientada a eventos, levando, em última análise, a aplicativos mais robustos.