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.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.