Best of Modern JavaScript — Set Operations

Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at sets.

Iterating Through Sets

We can iterate through sets with the for-of loop since sets are iterable objects.

For example, we can write:

const set = new Set(['foo', 'bar', 'baz']);
for (const x of set) {
  console.log(x);
}

Then we can write:

foo
bar
baz

logged.

The spread operator works with iterables to convert them to arrays.

This includes sets, so we can write:

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

and arr is [“foo”, “bar”, “baz”] .

Mapping and Filtering

To do map and filter operations, we can convert sets to arrays with the spread operator.

Then we can call the map and filter methods on those.

For example, we can map set entries to new values by writing:

const set = new Set([1, 2, 3]);
const squares = new Set([...set].map(x => x ** 2));

Then we get:

{1, 4, 9}

instead of:

{1, 2, 3}

To filter items, we can call the filter method on the array:

const set = new Set([1, 2, 3]);
const filtered = new Set([...set].filter(x => (x % 3) == 0));

We filtered out anything that isn’t evenly divisible by 3, so we get:

{3}

Union, Intersection, and Difference

We can compute union, intersection, and difference of 2 sets with various array operations.

Unions

A union is a set that has elements of both set a and b .

We can use the spread operator to create a union.

So we can write:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 5]);
const union = new Set([...a, ...b]);

And union is {1, 2, 3, 5} .

The spread operator combines both sets into one array.

[...a, ...b] is equivalent to [...a].concat([...b]) .

The Set constructor converts that back into a set, and remove the duplicates in the process.

Intersection

A set intersection is a set that has elements in set a that’s also in set b .

To create an intersection from 2 sets, we can write:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 5]);
const intersection = new Set(
  [...a].filter(x => b.has(x)));

We create 2 sets a and b .

Then we can get all the items in a that’s also in b with the filter method.

The has method checks if b also has the same item.

The Set constructor converts the array back to a set.

Therefore, we get:

{1, 3}

fot intersection .

Set Difference

The set difference lets us create a set from 2 sets a and b where the items in set a isn’t in set b .

To create the set difference, we can write:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 5]);
const difference = new Set(
  [...a].filter(x => !b.has(x)));

We call filter with a callback that negates what’s returned in has to return all the items that aren’t in b but it’s in a .

So we get:

{2}

as the value of difference .

Conclusion

We can iterate through sets and computer the union, difference, and intersections with array operations.