クロージャでメモリリークが起きる理由と防ぎ方をやさしく解説

function counter() {
  let n = 0;                 // 外側の変数
  return function () {       // 内側の関数がnを覚えている(クロージャ)
    n++;
    console.log(n);
  };
}

const inc = counter();
inc(); // 1
inc(); // 2

function makeWorker() {
  const big = new Array(1e6).fill("x"); // 大きな配列
  return () => big.length;               // bigを参照している
}

let worker = makeWorker();  // ここでbigがメモリに確保される
// workerが存在する限り、bigもガベージコレクションされない
worker = null;              // 参照を切ると、bigは解放対象になる

function onSomething(bigData) {
  window.addEventListener("resize", () => {
    // 無名関数がbigDataを参照(クロージャ)
    console.log(bigData.length);
  });
}
// onSomething(巨大データ)を呼ぶだけで、イベントリスナーが残る限りbigDataも残る

const bigData = new Array(1e6).fill({}); // 大きなデータ
window.addEventListener("resize", () => {
  console.log(bigData.length);
}); // 解除しない

const ac = new AbortController();
function mount() {
  const bigData = new Array(1e6).fill({});
  const handler = () => console.log(bigData.length);
  window.addEventListener("resize", handler, { signal: ac.signal });
}

function unmount() {
  ac.abort(); // すべての関連リスナーを解除
}

const bigCache = new Array(1e6).fill("x");
const id = setInterval(() => {
  console.log(bigCache[0]);
}, 1000); // clearIntervalしない

const bigCache = new Array(1e6).fill("x");
const id = setInterval(() => {
  console.log(bigCache[0]);
  // 条件が満たされたら停止
  clearInterval(id);
}, 1000);

function attach(node) {
  const handler = () => console.log(node.textContent);
  node.addEventListener("click", handler);
  // nodeをDOMからremoveしても、handlerが参照していると解放されにくい
}

function attach(node) {
  const ac = new AbortController();
  const handler = () => console.log(node.textContent);
  node.addEventListener("click", handler, { signal: ac.signal });

  return () => {
    ac.abort(); // 参照を断つ
    // 必要ならnode関連の変数もnull代入で参照を切る
    // node = null; // ローカルなら不要
  };
}

function makeSearch(data) { // dataがとても大きい
  return (keyword) => data.filter(d => d.includes(keyword));
}
const search = makeSearch(hugeArray); // hugeArrayがずっと残る

// 必要な最小限の情報だけを持つ
function makeSearch(indexOnly) {
  return (keyword) => indexOnly[keyword] || [];
}
// または都度引数で渡す
function search(data, keyword) {
  return data.filter(d => d.includes(keyword));
}

let saved; // どこからでも参照できる
function setup(data) {
  saved = () => console.log(data.length); // dataを閉じ込める
}

function runOnce(data) {
  const fn = () => console.log(data.length);
  fn(); // 使い切る
  // ここでスコープを抜ければ解放対象
}

// window.appHandlerのようなグローバルに残す
window.appHandler = (() => {
  const big = new Array(1e6).fill(0);
  return () => console.log(big[0]);
})();

(function main() {
  const big = new Array(1e6).fill(0);
  function run() { console.log(big[0]); }
  run();
  // スコープから抜ければ解放対象
})();

let cache = new Array(1e6).fill(0);
// ... 使い終わったら
cache = null; // 参照を切る

// once
element.addEventListener("click", onClick, { once: true });

// AbortController
const ac = new AbortController();
element.addEventListener("mousemove", onMove, { signal: ac.signal });
ac.abort(); // まとめて解除

// タイマー
const id = setInterval(tick, 1000);
clearInterval(id);

{
  const temp = prepare();
  doWork(temp); // ここでしか使わない
} // スコープを抜けて参照が消える

function calcSummary(list) {
  const buf = list.map(x => x.value);
  const sum = buf.reduce((a, b) => a + b, 0);
  return { sum };
} // bufはここでスコープ外