JavaScript - The WeakMap Object

Hello, future JavaScript developers! Today, we're going to dive into an exciting and somewhat mysterious part of JavaScript: the WeakMap object. Don't worry if you're new to programming; I'll guide you through this concept step by step, just like I've done for countless students in my years of teaching. So, grab a cup of coffee (or tea, if that's your thing), and let's embark on this WeakMap adventure together!

What is a WeakMap?

Before we jump into the nitty-gritty, let's understand what a WeakMap is. Imagine you have a magical box where you can store your toys, but this box has some special properties. It only accepts objects as keys (no strings or numbers allowed!), and it has a peculiar habit of forgetting about toys if you stop playing with them for a while. That's essentially what a WeakMap is in JavaScript - a collection that can only use objects as keys and doesn't prevent those objects from being garbage collected when they're no longer needed elsewhere in your program.

Syntax

Let's look at how we create and use a WeakMap:

let myWeakMap = new WeakMap();

Simple, right? We just call new WeakMap(), and voilà, we have our magical box ready to use!

WeakMap Properties

Now, you might be thinking, "Great! What properties can I access on this WeakMap?" Well, here's a fun fact: WeakMaps don't have any enumerable properties. It's like our magical box doesn't want to reveal its secrets easily. But don't worry, we have methods to interact with it!

WeakMap Methods

WeakMaps come with a small but powerful set of methods. Let's look at them in a handy table:

Method	Description
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

Let's see these methods in action!

set(key, value)

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

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

In this example, we're adding two key-value pairs to our WeakMap. Notice how we're using objects (obj1 and obj2) as keys. If we tried to use a string or number as a key, JavaScript would throw an error faster than you can say "WeakMap"!

get(key)

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

Here, we're retrieving the values associated with our object keys. It's like asking our magical box, "Hey, what toy did I store with this key?"

has(key)

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

The has method is like a bouncer at a club. It checks if a particular object key is in our WeakMap. In this case, obj1 is allowed in, but the new empty object {} is turned away at the door.

delete(key)

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

With delete, we're telling our WeakMap, "I don't want to play with this toy anymore." After deletion, obj1 is no longer in our WeakMap.

WeakMap Constructor()

The WeakMap constructor can also accept an iterable of key-value pairs. Here's an example:

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

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

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

This is like telling our magical box, "Here's a list of toys and where I want them stored" right from the start.

Examples

Now that we've covered the basics, let's look at some real-world examples where WeakMaps can be useful.

Example 1: Private Data

WeakMaps are great for storing private data associated with objects:

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

In this example, we're using a WeakMap to store private data for our Person class. The data is associated with each instance of Person, but it can't be accessed directly from outside the class methods.

Example 2: Caching

WeakMaps can be used for caching computed results without causing memory leaks:

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); // Performs calculation
expensiveOperation(obj); // Returns cached result

In this example, we're using a WeakMap to cache the results of an expensive operation. If the operation has been performed before on a particular object, we return the cached result instead of recalculating.

Conclusion

And there you have it, folks! We've explored the mysterious world of WeakMaps in JavaScript. From its unique key requirements to its garbage collection-friendly nature, WeakMaps offer a powerful tool for specific use cases in your JavaScript programs.

Remember, WeakMaps are like that quirky friend who only remembers people's faces, not their names, and tends to forget about people they haven't seen in a while. They're not for every situation, but when you need them, they're invaluable.

As you continue your JavaScript journey, keep WeakMaps in your toolbox. You never know when you might need to store some private data or create a cache that doesn't cause memory leaks. Happy coding, and may your WeakMaps always be strong in spirit!

Credits: Image by storyset