JavaScript - Objek WeakMap

Halo, para pengembang JavaScript masa depan! Hari ini, kita akan melihat bagian yang menarik dan agak misterius dari JavaScript: objek WeakMap. Jangan khawatir jika Anda baru belajar pemrograman; saya akan mengajarkan Anda konsep ini secara langkah demi langkah, seperti yang saya lakukan untuk ribuan murid dalam tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai petualangan WeakMap bersama!

Apa Itu WeakMap?

Sebelum kita masuk ke hal-hal kecil, mari kita pahami apa itu WeakMap. Bayangkan Anda memiliki kotak ajaib tempat Anda bisa menyimpan mainan Anda, tapi kotak ini memiliki beberapa properti khusus. Dia hanya menerima objek sebagai kunci (tidak diijinkan string atau angka!), dan dia memiliki kebiasaan khusus untuk lupa tentang mainan jika Anda berhenti bermain dengannya untuk sementara. Itu sebenarnya apa WeakMap di JavaScript - sebuah koleksi yang hanya bisa menggunakan objek sebagai kunci dan tidak menghalangi objek itu dari dibuang oleh pengumpulan sampah saat mereka tidak lagi diperlukan di program Anda.

Sintaks

Mari kita lihat bagaimana kita membuat dan menggunakan WeakMap:

let myWeakMap = new WeakMap();

Mudah, kan? Kita hanya memanggil new WeakMap(), dan voilà, kita memiliki kotak ajaib yang siap digunakan!

Properti WeakMap

Sekarang, Anda mungkin berpikir, "Bagus! Apa properti yang bisa saya akses di WeakMap ini?" Well, ada fakta menarik: WeakMaps tidak memiliki properti yang dapat dienumerasi. Itu seperti kotak ajaib kita tidak mau mengungkap rahasia-rahasiswa mudah. Tetapi jangan khawatir, kita memiliki metode untuk berinteraksi dengannya!

Metode WeakMap

WeakMaps datang dengan set metode kecil tapi kuat. Mari kita lihat mereka dalam tabel yang mudah:

Metode	Deskripsi
set(key, value)	Menambahkan elemen baru dengan kunci dan nilai yang ditentukan
get(key)	Mengembalikan nilai yang terkait dengan kunci yang ditentukan
has(key)	Mengembalikan boolean yang menunjukkan apakah elemen dengan kunci yang ditentukan ada
delete(key)	Menghapus elemen yang ditentukan dari WeakMap

Mari kita lihat metode-metode ini dalam aksi!

set(key, value)

let obj1 = {};
let obj2 = {};

let myWeakMap = new WeakMap();
myWeakMap.set(obj1, "Hello");
myWeakMap.set(obj2, "World");

Dalam contoh ini, kita menambahkan dua pasangan kunci-nilai ke WeakMap kita. Catatlah bagaimana kita menggunakan objek (obj1 dan obj2) sebagai kunci. Jika kita mencoba menggunakan string atau angka sebagai kunci, JavaScript akan melempar kesalahan lebih cepat daripada Anda bisa mengatakan "WeakMap"!

get(key)

console.log(myWeakMap.get(obj1)); // Output: "Hello"
console.log(myWeakMap.get(obj2)); // Output: "World"

Di sini, kita mengambil nilai yang terkait dengan kunci objek kita. Itu seperti meminta kotak ajaib, "Hei, apa mainan yang saya simpan dengan kunci ini?"

has(key)

console.log(myWeakMap.has(obj1)); // Output: true
console.log(myWeakMap.has({}));   // Output: false

Metode has adalah seperti penjaga di klub. Dia memeriksa apakah kunci objek tertentu ada di WeakMap kita. Dalam kasus ini, obj1 diijinkan masuk, tetapi objek kosong {} ditolak di depan pintu.

delete(key)

myWeakMap.delete(obj1);
console.log(myWeakMap.has(obj1)); // Output: false

Dengan delete, kita mengatakan ke WeakMap kita, "Saya tidak lagi ingin bermain dengan mainan ini." Setelah penghapusan, obj1 tidak lagi ada di WeakMap kita.

Konstruktor WeakMap()

Konstruktor WeakMap juga dapat menerima iterable dari pasangan kunci-nilai. Ini adalah contoh:

let obj3 = {};
let obj4 = {};

let myWeakMap2 = new WeakMap([
[obj3, "Value 1"],
[obj4, "Value 2"]
]);

console.log(myWeakMap2.get(obj3)); // Output: "Value 1"

Ini seperti mengatakan ke kotak ajaib kita, "Ini adalah daftar mainan dan tempat saya ingin mereka disimpan" langsung dari awal.

Contoh

Sekarang kita telah melihat dasar-dasar, mari kita lihat beberapa contoh dunia nyata di mana WeakMaps dapat berguna.

Contoh 1: Data Pribadi

WeakMaps sangat cocok untuk menyimpan data pribadi terkait dengan objek:

let privateData = new WeakMap();

class Person {
constructor(name, age) {
privateData.set(this, { name: name, age: age });
}

getName() {
return privateData.get(this).name;
}

getAge() {
return privateData.get(this).age;
}
}

let john = new Person("John", 30);
console.log(john.getName()); // Output: "John"
console.log(john.getAge());  // Output: 30

Dalam contoh ini, kita menggunakan WeakMap untuk menyimpan data pribadi untuk kelas Person. Data ini terkait dengan setiap instance dari Person, tetapi tidak dapat diakses langsung dari luar metode kelas.

Contoh 2: Caching

WeakMaps dapat digunakan untuk mencaching hasil operasi yang mahal tanpa menyebabkan kebocoran memori:

let cache = new WeakMap();

function expensiveOperation(obj) {
if (cache.has(obj)) {
console.log("Returning cached result");
return cache.get(obj);
}

let result = /* ... perform expensive calculation ... */;
cache.set(obj, result);
return result;
}

let obj = {};
expensiveOperation(obj); // Melakukan perhitungan
expensiveOperation(obj); // Mengembalikan hasil yang dicaching

Dalam contoh ini, kita menggunakan WeakMap untuk mencaching hasil operasi yang mahal. Jika operasi tersebut telah dilakukan sebelumnya pada objek tertentu, kita mengembalikan hasil yang dicaching daripada menghitung ulang.

Kesimpulan

Dan begitulah, teman-teman! Kita telah mengeksplorasi dunia misterius WeakMaps di JavaScript. Dari persyaratan kunci uniknya hingga sifat yang ramah pengumpulan sampahnya, WeakMaps menawarkan alat kuat untuk kasus khusus di program JavaScript Anda.

Ingat, WeakMaps adalah seperti teman yang aneh yang hanya ingat wajah, bukan nama, dan cenderung lupa tentang orang yang mereka belum lihat dalam waktu yang lama. Mereka bukan untuk setiap situasi, tetapi saat Anda membutuhkannya, mereka sangat berharga.

Sebagai Anda terus melanjutkan perjalanan JavaScript Anda, jaga WeakMaps tetap ada di dalam kotak alat Anda. Anda tidak tahu kapan Anda mungkin butuh menyimpan data pribadi atau membuat cache yang tidak menyebabkan kebocoran memori. Selamat coding, dan may your WeakMaps always be strong in spirit!

Credits: Image by storyset