JavaScript Use Cases of WeakMap
Tags: javascript, codenewbie, tutorial, webdev
Published: 2021-03-11 21:32:27

In the previous article, we learned that once the keyed object in `WeakMap` is changed/overridden to `null`, it gets removed from memory because the `WeakMap` can't reach it any longer. It helps to free up space when past stored data are not needed. Such objects are **garbage-collected automatically**. JavaScript engine cleans up the memory at a specific instance.

```js
let bello = { name: "Bello" };

const weakMap = new WeakMap();
weakMap.set(bello, 'secret documents');

bello = null; // changed/overriden reference

console.log( weakMap.has(bello) ); // false 
// bello is removed from memory!
```

If `Map` is used in place of `weakMap` then the object `bello` still exists provided `WeakMap` is alive even though it can't get the reference to its keyed object, `bello`. Such objects are **non-garbage-collected**.

```js
let bello = { name: "Bello" };

const map = new Map();
map.set(bello, 'secret documents');

bello = null; // overwrite the reference

console.log( map.keys() ); // [Map Iterator] { { name: 'Bello' } }
// bello still exist
```

Let's see the use cases of `WeakMap` below:

---
### Additional data storage
In the example above, if `bello` dies then the `secret documents` will be destroyed automatically.

Another example is to assume a website is accessible to signed-up users.

In the example below, the user object is the key and the signed-up count is the value.

**signup.js**
```js
const signedUpMap = new WeakMap(); // weakmap: user => visits count

// increase the visits count
function countUser(user) {
  let count = signedUpMap.get(user) || 0;
  signedUpMap.set(user, count + 1);
}
```

For a user that deletes his/her account, the count is reduced and the data of the user are removed from memory automatically. 

**count.js**

```js
let bello = { name: "Bello" };

countUser(bello); // bello signed-up

bello = null; // Bello deleted his account
```


---
### Caching

> Cache memory is a chip-based computer component that makes retrieving data from the computer's memory more efficient. It acts as a temporary storage area for the computer's processor to retrieve data from easily - [SeachStorage](https://searchstorage.techtarget.com/definition/cache-memory)

Let's assume we can store (cache) results from a function, so that future calls on the same object can reuse it.

**cache.js**

```js
let cache = new WeakMap();

// calculate and remember the result
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculate the result for */ obj;

    cache.set(obj, result);
  }

  return cache.get(obj);
}
```

**main.js**

```js
let obj = {/* some object */};

let result1 = process(obj);
let result2 = process(obj);

// ...later, when the object is not needed any more:
obj = null;

// Can't get cache.size, as it's a WeakMap,
// but it's 0 or soon be 0
// When obj gets garbage collected, cached data will be removed as well
```

For multiple calls of `process(obj)` with the same object, there's a clean-up of `cache` when certain objects are not needed. That is, the cached result will be removed from memory automatically after the object gets garbage collected.

You can read more on **cache** on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Cache)

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---