WeakMap dan WeakSet: Jurus Rahasia Manajemen Memori Efisien dan Data Pribadi di JavaScript Modern

Pernahkah Anda berhadapan dengan masalah memory leak di aplikasi JavaScript Anda? Atau mungkin Anda ingin menyimpan data tambahan yang terikat pada suatu objek, tapi tidak mau objek tersebut “terjebak” di memori selamanya hanya karena data tambahan ini? Jika ya, maka artikel ini untuk Anda!

Sebagai developer web, kita sering berinteraksi dengan banyak objek di memori. Dari elemen DOM, objek data, hingga instance class. Manajemen memori yang efisien adalah kunci untuk aplikasi yang responsif dan stabil. JavaScript memiliki garbage collector (GC) yang otomatis membersihkan objek yang tidak lagi direferensikan. Namun, terkadang kita secara tidak sengaja membuat referensi yang mencegah GC bekerja, sehingga menyebabkan memory leak.

Di sinilah WeakMap dan WeakSet hadir sebagai “jurus rahasia”. Mereka adalah struktur data khusus di JavaScript yang menawarkan cara cerdas untuk menyimpan referensi objek tanpa mencegah objek tersebut di-garbage collect. Mari kita selami lebih dalam bagaimana kedua fitur modern ini bisa menjadi pahlawan tak terduga dalam manajemen memori aplikasi Anda.

1. Memahami Konsep Dasar: Garbage Collection dan Memory Leak

Sebelum masuk ke WeakMap dan WeakSet, penting untuk memahami bagaimana garbage collection (GC) bekerja di JavaScript. Secara sederhana, GC akan mengidentifikasi dan menghapus objek dari memori yang tidak lagi bisa dijangkau atau direferensikan oleh bagian mana pun dari program Anda.

📌 Masalah Umum: Memory Leak Memory leak terjadi ketika suatu objek yang seharusnya sudah tidak terpakai, tetap berada di memori karena ada referensi yang tidak sengaja menahannya. Contoh klasiknya adalah menyimpan elemen DOM dalam sebuah Map atau Array global, lalu elemen DOM tersebut dihapus dari halaman. Jika referensi di Map/Array tidak ikut dihapus, elemen DOM tersebut akan tetap berada di memori, meskipun secara visual sudah tidak ada.

const cacheElement = new Map();

function addElementToCache(elementId, element) {
  cacheElement.set(elementId, element);
  // Bayangkan element ini dihapus dari DOM, tapi masih ada di cacheElement
}

// Setelah elemen dihapus dari DOM, objek element masih ada di memori
// karena cacheElement masih memegang referensinya. Ini potensi memory leak.

WeakMap dan WeakSet dirancang khusus untuk mengatasi skenario seperti ini. Kata “Weak” di sini berarti referensi yang mereka pegang ke objek adalah “lemah” (weak reference), tidak seperti referensi “kuat” (strong reference) yang dipegang oleh Map atau Set biasa.

2. WeakMap: Menyimpan Data “Pribadi” dan Metadata Tanpa Memory Leak

WeakMap adalah koleksi pasangan kunci-nilai (key-value) yang unik. Berbeda dengan Map biasa, WeakMap memiliki dua karakteristik kunci:

Kunci harus objek: Anda tidak bisa menggunakan nilai primitif (string, number, boolean, symbol) sebagai kunci di WeakMap.
Weak reference untuk kunci: Ini adalah bagian terpenting. Jika semua referensi kuat ke sebuah objek yang digunakan sebagai kunci di WeakMap menghilang, objek tersebut akan di-garbage collect, dan pasangan kunci-nilai di WeakMap akan otomatis dihapus.

Contoh 1: Data Pribadi (Private Data) untuk Objek

Sebelum adanya fitur private class fields (#propertyName) yang lebih baru, WeakMap sering digunakan sebagai cara untuk mengimplementasikan data “pribadi” atau non-enumerable pada instance objek.

// ✅ WeakMap untuk data pribadi
const _privateData = new WeakMap();

class User {
  constructor(name, password) {
    this.name = name;
    _privateData.set(this, { password }); // Menyimpan password secara "pribadi"
  }

  authenticate(inputPassword) {
    return _privateData.get(this).password === inputPassword;
  }

  // Metode lain...
}

const john = new User("John Doe", "supersecret");
console.log(john.name); // John Doe
console.log(john.password); // undefined, karena password disimpan di _privateData

console.log(john.authenticate("supersecret")); // true

// Jika objek `john` tidak lagi direferensikan,
// password-nya di _privateData juga akan otomatis di-garbage collect.

💡 Mengapa ini lebih baik daripada Map biasa? Jika kita menggunakan Map biasa (const _privateData = new Map();), maka selama _privateData masih ada, objek john (sebagai kunci) akan terus direferensikan secara kuat oleh _privateData. Ini berarti john tidak akan di-garbage collect bahkan jika tidak ada lagi referensi lain ke john di kode Anda. Dengan WeakMap, referensi ke john sebagai kunci bersifat lemah, sehingga john bisa di-GC jika tidak ada referensi kuat lain, dan data pribadinya ({ password: "supersecret" }) juga akan ikut terhapus.

Contoh 2: Menyimpan Metadata atau Cache untuk Elemen DOM

Skenario lain yang sangat cocok untuk WeakMap adalah ketika Anda ingin menyimpan metadata atau data cache yang terikat pada elemen DOM.

// ✅ WeakMap untuk menyimpan metadata elemen DOM
const elementMetadata = new WeakMap();

function addTooltip(element, text) {
  elementMetadata.set(element, { tooltipText: text, isVisible: false });

  element.addEventListener('mouseenter', () => {
    const data = elementMetadata.get(element);
    data.isVisible = true;
    // Tampilkan tooltip
    console.log(`Menampilkan tooltip untuk: ${data.tooltipText}`);
  });

  element.addEventListener('mouseleave', () => {
    const data = elementMetadata.get(element);
    data.isVisible = false;
    // Sembunyikan tooltip
    console.log(`Menyembunyikan tooltip untuk: ${data.tooltipText}`);
  });
}

const button = document.createElement('button');
button.textContent = 'Hover Me';
document.body.appendChild(button);

addTooltip(button, 'Ini adalah tombol interaktif');

// Jika `button` dihapus dari DOM dan tidak ada referensi kuat lain,
// objek `button` akan di-GC, dan metadata di `elementMetadata` juga akan hilang otomatis.
// Ini mencegah memory leak yang bisa terjadi jika menggunakan Map biasa.

Dengan WeakMap, kita bisa yakin bahwa metadata tidak akan menahan elemen DOM di memori jika elemen tersebut sudah tidak relevan lagi di halaman.

3. WeakSet: Melacak Keanggotaan Objek dengan Bijak

Mirip dengan WeakMap, WeakSet adalah koleksi objek yang unik, namun hanya menyimpan objek sebagai nilainya (tidak ada kunci-nilai). Karakteristik utamanya:

Hanya objek yang bisa disimpan: Sama seperti WeakMap, Anda tidak bisa menyimpan nilai primitif.
Weak reference untuk objek: Jika semua referensi kuat ke objek yang ada di WeakSet menghilang, objek tersebut akan di-garbage collect, dan objek tersebut akan otomatis dihapus dari WeakSet.

Contoh: Melacak Objek Aktif atau Terkelola

WeakSet sangat berguna ketika Anda perlu melacak sekelompok objek yang sedang “aktif” atau dikelola oleh suatu sistem, tetapi Anda tidak ingin keberadaan di WeakSet itu sendiri mencegah objek tersebut di-GC.

// ✅ WeakSet untuk melacak koneksi aktif
const activeConnections = new WeakSet();

class DatabaseConnection {
  constructor(id) {
    this.id = id;
    activeConnections.add(this); // Tambahkan koneksi ke WeakSet
    console.log(`Koneksi ${this.id} dibuat dan ditambahkan ke WeakSet.`);
  }

  close() {
    activeConnections.delete(this); // Hapus koneksi dari WeakSet saat ditutup
    console.log(`Koneksi ${this.id} ditutup dan dihapus dari WeakSet.`);
  }

  // Metode lain untuk interaksi database
}

let conn1 = new DatabaseConnection(1);
let conn2 = new DatabaseConnection(2);

console.log(activeConnections.has(conn1)); // true
console.log(activeConnections.has(conn2)); // true

conn1.close();
console.log(activeConnections.has(conn1)); // false

// Objek `conn2` masih ada di memori karena `let conn2` adalah referensi kuat.
// Namun, jika kita set `conn2 = null;`, maka `conn2` akan di-GC
// dan secara otomatis dihapus dari `activeConnections`.
conn2 = null;
// Pada titik ini, jika GC berjalan, conn2 akan dihapus dari memori dan WeakSet.
// (Tidak bisa langsung diverifikasi dengan console.log karena GC tidak deterministik)

⚠️ Penting: WeakMap dan WeakSet tidak iterable. Anda tidak bisa melakukan iterasi (for...of), forEach, atau mendapatkan ukuran (.size) dari mereka. Ini karena sifat weak reference yang tidak deterministik; objek bisa menghilang kapan saja, membuat iterasi menjadi tidak dapat diandalkan. Anda hanya bisa menggunakan .has(), .get() (untuk WeakMap), .set() (untuk WeakMap), dan .delete().

4. Kapan Menggunakan WeakMap dan WeakSet (dan Kapan Tidak)

✅ Gunakan WeakMap / WeakSet Ketika:

Anda ingin menyimpan data tambahan (metadata) untuk objek tanpa mencegah objek tersebut di-garbage collect. Ini adalah kasus penggunaan utama.
Kunci/nilai yang Anda simpan adalah objek dan bersifat ephemeral (berumur pendek atau bisa dihapus sewaktu-waktu, seperti elemen DOM).
Anda tidak perlu mengiterasi atau mengetahui jumlah item yang tersimpan. Jika Anda membutuhkan .size atau iterasi, Map/Set biasa adalah pilihan yang lebih baik.
Anda ingin mengimplementasikan data “pribadi” pada objek (sebelum atau sebagai alternatif private class fields).

❌ Hindari WeakMap / WeakSet Ketika:

Anda perlu menyimpan nilai primitif sebagai kunci atau nilai. WeakMap dan WeakSet hanya bekerja dengan objek.
Anda membutuhkan iterasi atau akses ke semua item yang tersimpan. Karena sifat weak reference dan non-determinisme GC, iterasi tidak mungkin dilakukan.
Anda ingin memastikan objek tetap ada di memori selama masih ada di koleksi. Dalam kasus ini, Anda memerlukan Map atau Set biasa (strong reference).
Anda ingin menggunakannya sebagai cache umum untuk data yang tidak terikat pada siklus hidup objek kunci/nilai.

5. Best Practices dan Potensi Jebakan

Pahami Non-Determinisme GC: Ingatlah bahwa garbage collection tidak terjadi secara instan atau pada waktu yang dapat diprediksi. Objek yang direferensikan secara lemah mungkin tidak langsung dihapus dari WeakMap/WeakSet begitu referensi kuat terakhir menghilang. Ini akan terjadi saat GC memutuskan untuk berjalan.
Hindari Referensi Kuat Tak Sengaja: Pastikan tidak ada referensi kuat lain yang menahan objek kunci/nilai Anda jika tujuan Anda adalah agar mereka di-GC. Misalnya, jika Anda menyimpan elemen DOM di WeakMap tapi juga ada variabel global yang menahan elemen DOM tersebut, WeakMap tidak akan menghapusnya sampai variabel global itu juga dilepaskan.
Kombinasikan dengan WeakRef dan FinalizationRegistry: Untuk skenario yang lebih kompleks, di mana Anda mungkin perlu melakukan sesuatu setelah sebuah objek di-GC, Anda bisa mengombinasikan WeakMap/WeakSet dengan WeakRef dan FinalizationRegistry. WeakRef memungkinkan Anda untuk membuat referensi lemah langsung ke objek, sementara FinalizationRegistry memungkinkan Anda mendaftarkan callback yang akan dipanggil ketika sebuah objek di-GC.

// Contoh dengan WeakRef (hanya untuk menunjukkan konsep, bukan pengganti WeakMap/WeakSet)
let obj = { name: "Ephemeral Object" };
const weakRefToObj = new WeakRef(obj);

// obj = null; // Setelah ini, weakRefToObj masih bisa mengakses obj, tapi obj bisa di-GC
// console.log(weakRefToObj.deref()); // Mungkin undefined jika obj sudah di-GC

Ini menunjukkan bagaimana WeakRef berbeda, yaitu memberikan Anda referensi lemah ke satu objek, sementara WeakMap dan WeakSet adalah koleksi objek dengan referensi lemah.

Kesimpulan

WeakMap dan WeakSet adalah alat yang sangat powerful dalam toolkit developer JavaScript modern. Mereka memungkinkan kita untuk membangun aplikasi yang lebih tangguh dan efisien dalam penggunaan memori, terutama ketika berurusan dengan objek yang siklus hidupnya tidak sepenuhnya berada di bawah kendali langsung kita (seperti elemen DOM atau objek eksternal lainnya).

Dengan memahami perbedaan antara referensi kuat dan lemah, serta kapan harus menggunakan masing-masing, Anda bisa menghindari memory leak yang membandel dan merancang arsitektur aplikasi yang lebih bersih dan prediktif. Jadi, jangan ragu untuk memasukkan WeakMap dan WeakSet ke dalam strategi manajemen memori Anda!