DEV Community

Cover image for You've been doing Set math by hand. JavaScript finally shipped `.union()`, `.intersection()`, and friends.
Parsa Jiravand
Parsa Jiravand

Posted on

You've been doing Set math by hand. JavaScript finally shipped `.union()`, `.intersection()`, and friends.

#javascript #typescript #frontend #webdev

You've written some version of this:

const intersection = new Set([...setA].filter(x => setB.has(x)));
const difference   = new Set([...setA].filter(x => !setB.has(x)));
const union        = new Set([...setA, ...setB]);
Enter fullscreen mode Exit fullscreen mode

It works. It's also four lines of manual iteration for operations any set-theory textbook covers in a sentence. JavaScript's Set shipped in ES6 — ten years ago — but the methods that make sets actually useful didn't come with it.

ES2025 added them. All of them.

The seven new methods

Every new Set method takes another set-like object — a Set, a Map, or anything with a size property and a has method — and returns a new Set without modifying either input.

.union(other) — all elements from both sets:

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

a.union(b); // Set {1, 2, 3, 4, 5}
Enter fullscreen mode Exit fullscreen mode

.intersection(other) — only elements present in both:

a.intersection(b); // Set {3}
Enter fullscreen mode Exit fullscreen mode

.difference(other) — elements in this that are not in other:

a.difference(b); // Set {1, 2}
b.difference(a); // Set {4, 5}
Enter fullscreen mode Exit fullscreen mode

.symmetricDifference(other) — elements in exactly one of the two sets:

a.symmetricDifference(b); // Set {1, 2, 4, 5}
Enter fullscreen mode Exit fullscreen mode

These four cover the standard set algebra you reach for most often. The other three are boolean predicates:

.isSubsetOf(other) — true if every element of this is in other:

new Set([1, 2]).isSubsetOf(new Set([1, 2, 3])); // true
new Set([1, 4]).isSubsetOf(new Set([1, 2, 3])); // false
Enter fullscreen mode Exit fullscreen mode

.isSupersetOf(other) — true if every element of other is in this:

new Set([1, 2, 3]).isSupersetOf(new Set([1, 2])); // true
Enter fullscreen mode Exit fullscreen mode

.isDisjointFrom(other) — true if the sets share no elements at all:

new Set([1, 2]).isDisjointFrom(new Set([3, 4])); // true
new Set([1, 2]).isDisjointFrom(new Set([2, 3])); // false
Enter fullscreen mode Exit fullscreen mode

🎮 Try it yourself

▶️ Open the interactive playground →

Runs right in your browser — poke at it and watch the concept react live.

A real-world example: permission diffing

The operations pay for themselves quickly when you're comparing sets of strings:

const currentPermissions = new Set(['read', 'write', 'admin']);
const requiredPermissions = new Set(['read', 'write', 'delete']);

const missing = requiredPermissions.difference(currentPermissions);
// Set {'delete'} — what the user needs but doesn't have

const hasAll = requiredPermissions.isSubsetOf(currentPermissions);
// false — deny access
Enter fullscreen mode Exit fullscreen mode

Or computing which tags changed between two versions of a document:

const before = new Set(['react', 'typescript', 'css']);
const after  = new Set(['react', 'vue', 'css', 'tailwind']);

const added   = after.difference(before);      // Set {'vue', 'tailwind'}
const removed = before.difference(after);      // Set {'typescript'}
const stable  = before.intersection(after);    // Set {'react', 'css'}
Enter fullscreen mode Exit fullscreen mode

Before, each of those lines was a three-liner. Now each is one method call that reads exactly like what it computes.

The "set-like" argument

Each method accepts any set-like object — not just Set instances. The spec defines set-like as any object with a numeric size property, a has(key) method, and a keys() method returning an iterator.

This means you can pass a Map as the argument and it works using the map's keys:

const activeUserIds = new Map([['u1', userA], ['u2', userB]]);
const bannedIds     = new Set(['u2', 'u3']);

bannedIds.intersection(activeUserIds); // Set {'u2'}
Enter fullscreen mode Exit fullscreen mode

It also means you can build custom data structures that interoperate with the native methods without converting to a plain Set first — anything implementing the three-property contract is compatible.

TypeScript support

TypeScript added the full method signatures in version 5.5 under the ES2025 lib. If your tsconfig.json targets an earlier version, you'll see type errors. The fix is adding "ES2025" (or the more specific "ES2025.Collection") to your lib array:

{
  "compilerOptions": {
    "lib": ["DOM", "ES2025"]
  }
}
Enter fullscreen mode Exit fullscreen mode

The algebra methods return Set<T> and the predicates return boolean. No type assertions or manual casting needed.

Browser support

All seven methods are Baseline 2025: Chrome 122, Firefox 127, Safari 17.4, Node.js 22. Any environment targeting browsers from the last year ships these with no polyfill and no build step.

If you need to support older targets, a shim is a few dozen lines — but every major browser in active use today already has them natively.

🧠 Test yourself

Think it clicked? Take the 6-question quiz →

Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.

The takeaway

Search your codebase for filter(x => otherSet.has(x)) or new Set([...a, ...b]). Each one is a native Set method written by hand.

The new methods aren't just shorter — they're clearer. .difference() names the operation. A spread with a filter describes the implementation. When both are available, the one that names the operation wins: it reads faster, it refactors cleaner, and it signals intent to the next person in the file. The only reason to reach for the manual version now is a polyfill budget you almost certainly don't have.

Thanks for reading! Let's stay connected:

Top comments (0)