Categories
Modern JavaScript

Best of Modern JavaScript — WeakMaps and Sets

Spread the love

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at weak maps.

WeakMap API

WeakMaps have 4 methods.

The WeakMap constructor takes an array of key-value pairs arrays.

The keys must be objects.

The WeakMap.prototype.get method takes the key and returns a value given the key.

WeakMap.prototype.set takes the key and value as arguments and returns the WeakMap with the new entry.

WeakMap.prototype.has takes the key as the argument and return true if the item with the given key exists and false otherwise.

WeakMap.prototype.delete takes the key with the item to delete and returns true if it’s deleted and false if it’s not found.

Set

ES5 doesn’t have a set data structure.

The alternatives are to use the keys of an object to store elements.

Or we can store the elements in an array.

We check whether it contains an element via indexOf or remove duplicates with filter etc.

indexOf can’t find the value NaN .

ES6 has the Set constructor to create a set.

It’s fast and handles NaN correctly.

We can create a set by writing:

const set = new Set();
set.add('foo');

We create a set with the Set construction and call add to add an entry.

The has instance method checks whether the item exists.

We can write:

const hasFoo = set.has('foo');

hasFoo is true since we have an entry with value 'foo' .

The delete instance lets us delete items.

For instance, we can write:

const deletedFoo = set.delete('foo');

It takes the key as the argument. It returns true if the item is deleted.

The size property has the number of items in the set.

So if we have:

const set = new Set();
set.add('foo');

const size = set.size;

And size is 1.

The clear instance method lets us remove all entries from a set.

For example, we can write:

set.clear();

Setting Up a Set

We can get the set by passing in an array into the Set constructor.

For example, we can write:

const set = new Set(['foo', 'bar', 'baz']);

We can also use the add method to add the items:

const set = new Set().add('foo').add('bar').add('baz');

The Set constructor has zero or one argument.

If no arguments are passed in, then an empty set is created.

If one argument is passed in, then the argument has to be an iterable object.

Comparing Set Elements

We can compare set elements with the has method.

The algorithm works like === but NaN is equal to itself

For instance, if we write:

const set = new Set([NaN]);

Then we can check if with:

consrt hasNaN = set.has(NaN);

Add the same element a second has no effect.

For example, we can write:

const set = new Set();
set.add('bar');
set.add('bar');

const size = set.size;

The size would still be one after we added 'bar' twice.

2 objects are never considered equal.

This behavior can’t be changed.

So if we write:

const set = new Set();
set.add({});
set.add({});

const size = set.size;

Then size is 2.

Conclusion

WeakMaps have a much simpler API than Maps.

Sets can’t have duplicate values, but objects are never considered the same even if they have the same content.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *