Aula 100 — Evitando memory leaks em JavaScript

Um dos problemas mais difíceis de identificar em aplicações JavaScript são os memory leaks.

Eles não quebram o código imediatamente, mas fazem a aplicação:

• ficar lenta com o tempo
• consumir memória demais
• travar ou recarregar inesperadamente

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que são memory leaks
• Identificar causas comuns
• Evitar referências desnecessárias
• Escrever código mais seguro e sustentável

O que é um memory leak?

Um memory leak acontece quando:

objetos que não são mais necessários continuam ocupando memória.

Em JavaScript, isso ocorre quando o Garbage Collector não consegue liberar um objeto, porque ainda existe alguma referência a ele.

Importante: o problema não é o Garbage Collector

O Garbage Collector funciona muito bem.

O problema geralmente é:

• referências mantidas sem necessidade
• listeners esquecidos
• closures mal usados

Causa 1 — Event listeners não removidos

Veja este exemplo:

 const botao = document.querySelector("#btn");

function aoClicar() {
console.log("Clicou!");
}

botao.addEventListener("click", aoClicar);

Se esse botão for removido do DOM:

• o listener continua na memória
• a função não é liberada

✅ Correto:

 botao.removeEventListener("click", aoClicar); 

Causa 2 — Closures mantendo referências

Closures são poderosos — e perigosos se mal usados.

 function criarContador() { let contador = 0;

return function () {
contador++;
console.log(contador);
};
}

const contar = criarContador();

Aqui:

• a variável contador nunca é liberada
• enquanto contar existir

Causa 3 — Variáveis globais desnecessárias

Variáveis globais vivem durante toda a execução da aplicação.

❌ Evite:

 let dados = [];

function carregar() {
dados.push(new Array(1000000));
}

Esse array nunca será liberado.

Causa 4 — Timers esquecidos

Timers também mantêm referências.

 setInterval(() => { console.log("Executando..."); }, 1000); 

Se não forem cancelados:

• continuam rodando
• mantêm funções vivas

✅ Correto:

 const id = setInterval(() => { console.log("Executando..."); }, 1000);

clearInterval(id);

Causa 5 — Estruturas que crescem sem controle

Exemplo clássico:

 const cache = [];

function adicionar(item) {
cache.push(item);
}

Se nunca limpar:

• a memória cresce indefinidamente

Boas práticas para evitar memory leaks

• remova event listeners quando não precisar mais
• limpe timers (clearTimeout, clearInterval)
• evite variáveis globais
• tenha cuidado com closures longas
• libere referências explicitamente quando possível

Uso consciente de WeakMap e WeakSet

Como vimos anteriormente:

• WeakMap e WeakSet ajudam a evitar vazamentos
• não impedem o Garbage Collector

Ferramentas de diagnóstico

Você pode investigar memory leaks usando:

• DevTools → Memory
• Heap snapshots
• Performance monitor

Mas o melhor diagnóstico ainda é:

código bem pensado.

Na próxima aula, vamos fechar esse bloco com um tema crítico: Segurança no JavaScript (XSS).