DEV Community

Cover image for JavaScript WeakMap and WeakSet
Bello Osagie
Bello Osagie

Posted on β€’ Edited on

1

JavaScript WeakMap and WeakSet

WeakMap

In the previous article, the primitive value was used as the key. This is different in weakMap because the object is the key.

See the example below:

const weakMap = new WeakMap();

const obj = {};
const str = '';

weakMap.set(obj, "ok"); // WeakMap { <items unknown> }
weakMap.set(str, "ok");  // only use non-primitive data as key
// TypeError: Invalid value used as weak map key
Enter fullscreen mode Exit fullscreen mode

If there's no reference to the object, it gets removed from memory automatically.

See the example below:

let bello = { name: "Bello" };

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

bello = null; // changed/overriden reference

// bello is removed from memory!
Enter fullscreen mode Exit fullscreen mode

WeakMap does not support iteration methods like keys(), values(), entries().

The following methods still work on WeakMap.

  • weakMap.get(key)
  • weakMap.set(key, value)
  • weakMap.delete(key)
  • weakMap.has(key)

The reason behind non-supported iterable methods in WeakMap is that JavaScript engine memory cleanup (full or partial cleanup) may be done immediately or later when more deletions happen.


WeakSet

It is basically used as additional storage of the yes/no or true/false fact of an object like keeping track of people who visited a site:

Mostly only objects are added to WeakSet.

  • Supported methods are add has and delete.
  • It doesn't support size and keys().
  • Like weakMap iteration methods are not supported and also lack the ability to get all current content.

See the example below:

const visitedSet = new WeakSet();

let bello = { name: "Bello" };
const monica = { name: "Monica" };
const jennifer = { name: "Jennifer" };

visitedSet.add(bello); // Bello visited site
visitedSet.add(monica); // Monica visited site
visitedSet.add(bello); // Bello again visited site

// visitedSet has 2 users now

// check if Bello visited the site?
console.log( visitedSet.has(bello) ); // true

// check if Jennifer visited the site
console.log( visitedSet.has(jennifer) ); // false

bello = null; // visitedSet will be cleaned automatically
Enter fullscreen mode Exit fullscreen mode

Buy me a Coffee


Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay