JavaScript Gets New Set Methods

Seven years ago, folks asked for Sets to have more methods beyond the standard add, has, and so on. These were designed for cases where you need to work with multiple sets. Creating unions, intersections and stuff like that, which are super common operations.

Well, 7 years later, this proposal finally hit stage 4! That means it’s getting implemented in JavaScript and browsers for real now.

If you don’t know what sets are: they’re basically structures like arrays, but they can only store a value once (we covered these techniques here). It’s a way to deduplicate an array efficiently.

Starting now, we have these new methods on sets:

Set.prototype.intersection#

Returns elements that are in both A and B:

1
const A = new Set([1, 3, 5, 7, 9]);
2
const B = new Set([1, 4, 9]);
3
console.log(A.intersection(B)); // Set(2) { 1, 9 }

Set.prototype.difference#

The opposite of intersection, returns items that are in A but not in B:

1
const A = new Set([1, 3, 5, 7, 9]);
2
const B = new Set([1, 4, 9]);
3
console.log(A.difference(B)); // Set(3) { 3, 5, 7 }

Set.prototype.union#

Combines both sets into a single set. This was a pain to do before, because you had to keep two separate sets, turn them into arrays, then merge them into a third set. So this method:

1
const A = new Set([2, 4, 6, 8]);
2
const B = new Set([1, 4, 9]);
3
console.log(A.union(B)); // Set(6) { 2, 4, 6, 8, 1, 9 }

Is a shorthand for this:

1
const A = new Set([2, 4, 6, 8]);
2
const B = new Set([1, 4, 9]);
3
console.log(new Set([...A, ...B])); // Set(6) { 2, 4, 6, 8, 1, 9 }

Set.prototype.symmetricDifference#

This one’s cool. It returns elements that are in either A or B, but not in both. If you know a bit of logic, this is the equivalent of an XOR (exclusive or) gate.

1
const A = new Set([2, 4, 6, 8]);
2
const B = new Set([1, 4, 9]);
3
console.log(A.symmetricDifference(B)); // Set(5) { 2, 6, 8, 1, 9 }

Set.prototype.isSubsetOf#

A check function that tells you whether A is completely contained in B:

1
const A = new Set([4, 8, 12, 16]);
2
const B = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
3
console.log(A.isSubsetOf(B)); // true

Set.prototype.isSupersetOf#

Same idea, but flipped. This tells you whether all elements of B are contained in A:

1
const A = new Set([4, 8, 12, 16]);
2
const B = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);
3
console.log(B.isSupersetOf(A)); // true

Set.prototype.isDisjointFrom#

This is the final method to round it out. It tells you whether A and B are disjoint, meaning there’s no element from A in B.

Which also means there’s no element from B in A, so this function is idempotent.

1
const A = new Set([2, 3, 5, 7, 11, 13, 17, 19]);
2
const B = new Set([1, 4, 9, 16]);
3
console.log(A.isDisjointFrom(B)); // true
4
console.log(B.isDisjointFrom(A)); // true

Conclusion#

The new Set methods are available in:

• Chrome 122 or newer
• Edge 122 or newer
• Firefox 127 or newer
• Safari 17 or newer

You can see more details on MDN