Categories

# Best of Modern JavaScript — Set Operations

Since 2015, JavaScript has improved immensely.

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

### 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}
``````

``````{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.

## By John Au-Yeung

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