Un memory leak (perdita di memoria) accade quando una parte della nostra applicazione continua a occupare memoria anche se non serve più, il che può portare a prestazioni peggiori nel tempo, browser che consumano più RAM e comportamenti strani o rallentamenti.

In JavaScript, questo capita spesso per via di closure, event listener e variabili che restano raggiungibili, anche se non più utili.

function outer() {
  let secret = "mio segreto";
  return function inner() {
    console.log(secret);
  };
}

Una closure avviene quando una funzione interna può accedere a variabili definite in una funzione esterna, anche dopo che quest?ultima ha terminato la sua esecuzione. Facciamo un esempio più concreto:

function setupProfile(user) {
  const bigData = new Array(1000000).fill(`Dati di ${user.name}`);

  function onClick() {
    console.log(`Aggiorno profilo di ${user.name}`);
  }

  document.getElementById('updateBtn').addEventListener('click', onClick);
}

setupProfile(myUser);

In questo caso, la funzione setupProfile viene eseguita e associa un evento al click su un bottone. Ma dato che l'evento è definito all'interno della funzione, la variabile bigData e l'oggetto user restano in memoria anche dopo che la funzione ha finito l'esecuzione.

Un modo per evitare questo problema è rimuovere l'event listener quando non serve più. Possiamo farlo in vari modi, uno dei più semplici è impostare un timer e rimuoverlo dopo un certo periodo di tempo.

function setupProfile(user) {
  // [...]

  //Cleanup automatico dopo 30 secondi (esempio)
  setTimeout(() => {
    btn.removeEventListener('click', onClick);
  }, 30000);
}

In questo modo, non essendo più raggiungibile la funzione onClick, le variabili bigData e user non saranno più in memoria, evitando il memory leak.