Memahami Memory Management di JavaScript: Apa Itu Garbage Collection?

JavaScript Tidak Berarti Bebas dari Masalah Memori

Salah satu daya tarik JavaScript dibanding C atau C++ adalah tidak perlu mengalokasikan dan membebaskan memori secara manual. Garbage Collector (GC) menangani itu. Tapi ini tidak berarti memory leak tidak bisa terjadi — mereka bisa, dan sering lebih sulit dideteksi karena tersembunyi.

Siklus Hidup Memori

1. Alokasi: memori dialokasikan saat variabel dibuat, objek dibuat, atau fungsi dipanggil.
2. Penggunaan: data dibaca dan ditulis.
3. Pembebasan: GC mendeteksi memori yang tidak lagi dapat diakses dan membebaskannya.

Cara Kerja Garbage Collector: Mark and Sweep

Algoritma utama yang dipakai V8 (engine Node.js dan Chrome) adalah Mark and Sweep:

1. GC dimulai dari "roots" — variabel global, call stack saat ini.
2. Dari roots, GC menelusuri semua referensi yang bisa dijangkau (mark).
3. Objek yang tidak bisa dijangkau dari roots dianggap "sampah" dan memorinya dibebaskan (sweep).

Penyebab Memory Leak yang Umum

1. Global Variable yang Tidak Disengaja

function setData() {
  data = { huge: "object" }; // tanpa var/let/const — jadi global!
}
// data.huge tidak pernah di-GC karena global selalu reachable

2. Event Listener yang Tidak Dibersihkan

// ❌ Memory leak di komponen React
useEffect(() => {
  window.addEventListener("resize", handleResize);
  // tidak ada cleanup!
}, []);

// ✅ Bersihkan saat komponen unmount
useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

3. Closure yang Menahan Referensi Besar

function createClosure() {
  const hugeData = new Array(1000000).fill("data");
  return function() {
    // Meski hanya pakai satu element, seluruh hugeData tetap di memori
    return hugeData[0];
  };
}

// Solusi: hanya simpan apa yang dibutuhkan
function createClosure() {
  const hugeData = new Array(1000000).fill("data");
  const needed = hugeData[0];
  return () => needed; // hugeData bisa di-GC
}

4. Cache Tanpa Batas

// ❌ Cache yang terus tumbuh
const cache = {};
function expensive(key) {
  if (!cache[key]) cache[key] = compute(key);
  return cache[key];
}

// ✅ Gunakan WeakMap atau batasi ukuran cache
const cache = new WeakMap(); // otomatis di-GC saat key tidak ada referensi lain

Cara Mendeteksi Memory Leak

Gunakan Chrome DevTools → Memory tab → pilih "Allocation instrumentation on timeline". Rekam aktivitas, lalu lihat apakah heap size terus naik tanpa turun — itu indikasi kuat adanya leak.

WeakRef dan FinalizationRegistry (Modern JS)

// WeakRef: referensi ke objek yang tidak mencegah GC
const ref = new WeakRef(largeObject);
const obj = ref.deref(); // bisa undefined jika sudah di-GC
if (obj) { /* gunakan obj */ }