Set operations

Sets as friend groups

A Set already gives you uniqueness: a value can appear once, no matter how many times you try to add it. ES2025 adds the missing vocabulary for comparing two Sets: union, intersection, difference, symmetric difference, and three true/false relationship checks.

The curriculum summary for this lesson is simple: union, intersection, and difference with the built-in Set methods. The important upgrade is clarity. Instead of translating a question into spreads, filter, and includes, you can write the question you mean.

This lesson builds on Map & Set for Set basics, on Searching arrays for the old filter/includes style, and on map/filter/reduce for list transformations.

a.union(b) creates a new Set containing values from a, then values from b that are not already present. That order rule matters when you turn the result back into an array: the caller’s insertion order comes first, then the argument contributes only new values.

a.intersection(b) creates a new Set containing values that appear in both. For ordinary Sets of the same size, you can think “walk the left Set and keep matches.” The specification may iterate the smaller side for efficiency, but the lesson examples use small Sets where the visible result is stable and tested.

1const devA = new Set(["JavaScript","CSS","Accessibility"]);2const devB = new Set(["CSS","React","Testing"]);3const result = [...devA.union(devB)];4console.log(result);

The Venn diagram is labeled as a diagram because JavaScript is not drawing circles internally. The result list beside it is real: it comes from the native method shown in the code pane. Notice that the original Sets stay unchanged after every operation.

1const myFriends = new Set(["Ada", "Bea", "Cal"]);Run2const yourFriends = new Set(["Bea", "Cal", "Dev"]);3myFriends.union(yourFriends);4myFriends.intersection(yourFriends);5myFriends.difference(yourFriends);6myFriends.symmetricDifference(yourFriends);

difference is directional. oldTags.difference(newTags) means “what was removed?” newTags.difference(oldTags) means “what was added?” Same two Sets, different caller, different question.

symmetricDifference is the “changed on either side” operation: values that appear in exactly one Set. It is great for summaries, but less precise than running difference both ways when you need separate added and removed lists.

1const oldTags = new Set(["js", "css", "accessibility"]);Run2const newTags = new Set(["js", "react", "accessibility"]);3oldTags.difference(newTags);4oldTags.isSupersetOf(newTags);5oldTags.isDisjointFrom(newTags);

isSubsetOf, isSupersetOf & isDisjointFrom

The three predicate methods return booleans. Use them when the answer should be true or false, not a new collection.

• small.isSubsetOf(big): every value in small is also in big.
• big.isSupersetOf(small): big contains every value from small.
• a.isDisjointFrom(b): the Sets share no values at all.

const required = new Set(["read", "write"]);
const user = new Set(["read", "write", "delete"]);

if (required.isSubsetOf(user)) {
  console.log("allowed");
}

The caller communicates intent. “Are all required permissions inside the user’s permissions?” reads clearly as required.isSubsetOf(user). The equivalent user.isSupersetOf(required) is also correct; choose the one that matches your sentence.

The argument to these methods does not have to be an actual Set. It must be set-like: an object with a numeric size, a has(value) method, and a keys() method that produces its values. A Map qualifies because its keys act like the set of values.

1const userPermissions = new Set(["read", "write", "admin"]);Run2const requiredMap = new Map([["read", true], ["write", true]]);3userPermissions.isSupersetOf(requiredMap);4const requiredLike = {5  size: 2,6  has(value) { return value === "read" || value === "write"; },7  keys() { return ["read", "write"][Symbol.iterator](); },8};9userPermissions.isSupersetOf(requiredLike);10userPermissions.union(["read"]);

1const userPermissions = new Set(["read", "write", "admin"]);2const requiredMap = new Map([["read", true], ["write", true]]);3userPermissions.isSupersetOf(requiredMap);4const requiredLike = {5  size: 2,6  has(value) { return value === "read" || value === "write"; },7  keys() { return ["read", "write"][Symbol.iterator](); },8};9userPermissions.isSupersetOf(requiredLike);10userPermissions.union(["read"]);

Arrays are iterable, but they are not set-like because arrays do not have has(value). Passing an array throws a TypeError. Write mySet.union(new Set(array)) when your data starts as an array.

The old way vs the new way

Before these methods, you already had the tools: spread a Set into an array, filter the other array, and check membership with has or includes. That still works and is the right fallback when you cannot rely on ES2025 support. The new methods are easier to read and harder to get subtly wrong.

1const a = new Set(["js", "css", "html"]);2const b = new Set(["css", "react"]);3const newWay = [...a.union(b)];4const oldWay = [...a, ...[...b].filter((item) => !a.has(item))];5console.log(newWay.join(", "));6console.log(oldWay.join(", "));7console.log([...a].join(", "));

Both styles print the same union, and line 7 proves the original caller is still js, css, html. These methods return new Sets; they do not mutate the originals.

Where you'll use this

Set operations show up whenever lists represent membership: tags, permissions, selected filters, feature flags, shopping-list ingredients, or shared interests.

const before = new Set(["js", "css", "accessibility"]);
const after = new Set(["js", "react", "accessibility"]);

const added = after.difference(before);   // Set { "react" }
const removed = before.difference(after); // Set { "css" }
const changed = before.symmetricDifference(after); // Set { "css", "react" }

const mia = new Set(["music", "hiking", "games"]);
const noor = new Set(["cooking", "music", "games"]);

const shared = mia.intersection(noor); // Set { "music", "games" }

A good habit: keep your domain sentence beside the code. “Added tags” is after.difference(before); “removed tags” is before.difference(after). That sentence prevents swapped arguments during maintenance.

Common misconceptions

Key takeaways

• union, intersection, difference, and symmetricDifference return new Sets.
• difference is directional; swap the caller to answer the opposite side.
• isSubsetOf, isSupersetOf, and isDisjointFrom return booleans.
• Set-like arguments need size, has, and keys. Maps work; arrays must be wrapped in new Set(array).
• Feature-detect in browsers that may not have ES2025 Set methods yet.

Up next: WeakMap & WeakSet.