Set operations

Sets as friend groups

A Set is a collection where each value appears only once. If you add the same value twice, the Set still holds it once.

Often you have two Sets and want to compare them. JavaScript's 2025 edition, called ES2025, added seven methods for this. Four of them make a new Set:

• union: every value from either Set.
• intersection: only the values both Sets have.
• difference: the values only the first Set has.
• symmetricDifference: the values only one of the two Sets has.

The other three answer a yes-or-no question with true or false. You'll meet them in their own section.

Before these methods, you had to build each answer by hand from arrays, filter, and includes. Now the method name says what you want.

const cart = new Set(["tea", "bread"]);
const newItems = new Set(["bread", "eggs"]);
const allItems = cart.union(newItems);
console.log([...allItems].join(", "));

Line 1 makes a Set called cart with two groceries. Line 2 makes a Set of new items. One of them, bread, is already in the cart. Line 3 calls union. It makes a new Set with the values of both. Line 4 prints that new Set. The spread [...allItems] copies the values into an array so join can put commas between them.

It prints tea, bread, eggs. The cart's values come first, in their order. Then come the new values. bread appears only once.

const hasSetMethods = typeof Set.prototype.union === "function";
console.log(hasSetMethods);

Line 1 asks whether Set.prototype.union is a function. Set.prototype is the place where all Sets find their methods, and typeof tells you what kind of value something is. A browser that has the method prints true.

This kind of check is called feature detection. It is safer than guessing what a browser supports. If the check gives false, use the older way shown later.

This lesson uses ideas from earlier lessons:

• Map & Set, for how a Set works.
• Searching arrays, for the older filter/includes way.
• map/filter/reduce, for turning one list into another.

In a.union(b), two Sets take part. This lesson gives them names:

• The caller is the Set before the dot, a. It calls the method.
• The argument is the Set inside the brackets, b.

a.union(b) makes a new Set. First it takes every value from the caller, in order. Then it adds the values from the argument that are not in it yet. So when you turn the result into an array, the caller's values come first.

a.intersection(b) makes a new Set with only the values that are in both Sets. A simple way to picture it: walk through the caller and keep each value the argument also has.

When the argument is the smaller Set, JavaScript may walk through the argument instead, to save time. Then the result can come out in a different order. So use intersection to find shared values, not to put values in order.

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

The circles are a drawing to help you see the two groups. The result list next to them is real. It comes from the actual method in the code. The rows Original A and Original B show that the method never changes the two Sets it compares.

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);

a.difference(b) keeps the values that are in the caller, a, but not in the argument, b. So which Set comes first matters.

• oldTags.difference(newTags) answers "which tags were removed?"
• newTags.difference(oldTags) answers "which tags were added?"

The two Sets are the same in both lines. Only the caller changes, and so does the question.

symmetricDifference keeps the values that are in exactly one of the two Sets. It drops the values both Sets share. Use it when you only want one list of "what changed". When you need the added values and the removed values as two separate lists, call difference twice, once each way.

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

These three methods don't make a new Set. They give back a boolean: true or false. Use them when your question has a yes-or-no answer.

• small.isSubsetOf(big): is every value in small also in big?
• big.isSupersetOf(small): does big have every value that small has?
• a.isDisjointFrom(b): do the two Sets share no values at all?

const required = new Set(["read", "write"]);
const user = new Set(["read", "write", "delete"]);
console.log(required.isSubsetOf(user));
console.log(user.isSupersetOf(required));
console.log(required.isDisjointFrom(user));

Line 1 lists the permissions a page needs. Line 2 lists the permissions a user has. Lines 3 and 4 ask the same question from opposite sides: does the user have everything required? Both print true.

Line 5 asks whether the two Sets share nothing. They share read and write, so it prints false.

These methods only say yes or no. When a check gives false and you want to know which values caused it, use difference.

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

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

Line 4 reads like the question you are asking: are all the required permissions inside the user's permissions? Here they are, so line 5 prints allowed. Writing user.isSupersetOf(required) gives the same answer. Pick the one that matches how you say the question.

const user = new Set(["read", "write"]);
const required = new Map([["read", true]]);
console.log(user.isSupersetOf(required));

A Map holds pairs of a key and a value. When a Map is the argument, the method looks only at its keys. The value true is ignored. The only key is read, and user has read, so line 3 prints true.

The argument doesn't have to be a real Set. It has to be set-like. A set-like object has these three things:

• a size property that is a number,
• a has(value) method that says whether a value is in it,
• a keys() method that hands out its values one by one.

A Map has all three. Its keys play the part of the 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"]);

Lines 4 to 8 make a plain object with size, has, and keys. It is not a Set, but it has the three things, so line 9 works too.

You can loop over an array with for...of. Things you can loop over like that are called iterable. But an array is not set-like, because it has no has(value) method. So line 10 throws a TypeError. When your values start in an array, wrap it first: mySet.union(new Set(array)).

The old way vs the new way

Before these methods, you built each answer by hand. You copied a Set into an array with spread, filtered the other one, and checked each value with has or includes. That still works. Use it when a browser doesn't have the new methods. The new methods are easier to read and easier to get right.

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(", "));

Line 3 is the new way: one call to union. Line 4 is the old way. It copies every value of a, then adds each value of b that a doesn't have. Lines 5 and 6 print the same list.

Line 7 prints a again, and it is still js, css, html. These methods make new Sets. They never change the Sets you start with.

The table below lists all seven methods. Every row uses the two party groups: a holds Ada, Bea, and Cal, and b holds Bea, Cal, and Dev.

Where you'll use this

You'll use these methods whenever a list says who or what belongs to a group. For example:

• tags on a blog post,
• a user's permissions,
• the filters someone ticked on a shopping site,
• features switched on for a user,
• ingredients in a recipe,
• hobbies two people share.

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: say the question in words, and let the variable name say it too. "Added tags" is after.difference(before). "Removed tags" is before.difference(after). A clear name stops someone from swapping the two Sets by mistake later.

Common misconceptions

const savedUser = { id: 1 };
const currentUser = { id: 1 };
const saved = new Set([savedUser]);
console.log(saved.has(savedUser));
console.log(saved.has(currentUser));

Lines 1 and 2 make two separate objects that look the same. Line 3 puts only the first one in a Set. Line 4 asks about that same object, so it prints true. Line 5 asks about the other object. It looks the same, but it is a different object, so it prints false.

Key takeaways

• union, intersection, difference, and symmetricDifference each make a new Set.
• With difference, order matters. Swap the two Sets to get the other side.
• isSubsetOf, isSupersetOf, and isDisjointFrom give back true or false.
• The argument must be set-like: it needs size, has, and keys. A Map works. Wrap an array in new Set(array) first.
• Older browsers may not have these methods. Check for them before you use them.

Up next: WeakMap & WeakSet.