JS Set Logic

Beyond adding and removing individual items, JavaScript Sets support mathematical set operations directly -- union (everything in either set), intersection (only what is in both), and difference (what is in one but not the other) -- letting you combine or compare two Sets without writing manual loop-based logic.

In this page:

Union: Combining Two Sets
Intersection: Finding Shared Items
Difference: Finding What's Unique to One Set
Other Set Relationship Checks
Fallback for Older Browsers

Union: Combining Two Sets

setA.union(setB) returns a brand-new Set containing every unique item from both Sets combined -- exactly like merging two lists together while automatically discarding any duplicates, since a Set can never hold the same value twice.

Note: Use union() when you need every distinct item from two collections merged together, letting the Set's inherent uniqueness handle deduplication automatically.

Warning: union() (like the other set operations) returns a new Set, leaving both original Sets completely unmodified.

Example: Union: Combining Two Sets

javascript

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);
console.log(a.union(b)); // {1, 2, 3, 4, 5}

Intersection: Finding Shared Items

setA.intersection(setB) returns a new Set containing only the items present in BOTH Sets -- useful for finding common elements, like tags shared between two articles, or users who appear in two separate groups.

Note: Use intersection() specifically when you need to know what two collections have in common, rather than everything from either one.

Warning: An intersection between two Sets with nothing in common correctly returns an empty Set, not an error or null.

Example: Intersection: Finding Shared Items

javascript

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
console.log(a.intersection(b)); // {2, 3}

Difference: Finding What's Unique to One Set

setA.difference(setB) returns a new Set containing only the items present in setA but NOT in setB -- useful for finding what has been removed, what remains to be processed, or what one group has that another does not, in one direction only.

Note: Remember difference() is directional: setA.difference(setB) is not the same result as setB.difference(setA) -- order matters, unlike union or intersection.

Warning: Mixing up the order of setA.difference(setB) when you actually meant setB.difference(setA) is an easy mistake, since the method name alone does not indicate direction.

Example: Difference: Finding What's Unique to One Set

javascript

const a = new Set([1, 2, 3]);
const b = new Set([2, 3]);
console.log(a.difference(b)); // {1}

Other Set Relationship Checks

isSubsetOf(), isSupersetOf(), and isDisjointFrom() answer specific yes/no questions about how two Sets relate -- whether one is entirely contained within the other, whether one entirely contains the other, or whether they share no elements at all.

Note: Reach for these relationship-check methods when you specifically need a true/false answer about how two Sets relate, rather than computing and inspecting a combined Set yourself.

Warning: isSubsetOf() and isSupersetOf() are inverse perspectives of the same relationship -- setA.isSubsetOf(setB) is equivalent to setB.isSupersetOf(setA).

Example: Other Set Relationship Checks

javascript

const a = new Set([1, 2]);
const b = new Set([1, 2, 3]);
console.log(a.isSubsetOf(b));   // true
console.log(b.isSupersetOf(a)); // true
console.log(a.isDisjointFrom(new Set([9]))); // true

Fallback for Older Browsers

Since these set-operation methods are a relatively recent addition, code needing to support older browsers can achieve the same results with array methods and manual filtering -- combining spread syntax with .filter() to replicate union, intersection, and difference behavior manually.

Note: If broad older-browser support is a genuine requirement, use the manual array-based fallback rather than the newer built-in methods, or add a small polyfill.

Warning: Silently relying on union()/intersection()/difference() without checking browser support requirements can produce a runtime error ("not a function") on older browsers that lack these newer methods.

Example: Fallback for Older Browsers

javascript

const a = [1, 2, 3];
const b = [2, 3, 4];
const union = [...new Set([...a, ...b])];
const intersection = a.filter(x => b.includes(x));
console.log(union, intersection); // manual fallback for older browsers

Common Mistakes

Assuming these set-operation methods (union, intersection, difference) are supported everywhere -- they are a relatively recent addition, and older browsers may need a manual loop-based implementation instead.
Confusing intersection (only shared items) with union (everything from both), producing the wrong combined result.
Forgetting that these methods return a NEW Set, rather than modifying either of the original Sets in place.

Chapter Summary

setA.union(setB) returns a new Set containing every item present in either Set.
setA.intersection(setB) returns a new Set containing only the items present in both Sets.
setA.difference(setB) returns a new Set containing items present in setA but NOT in setB.

Browser Support

Set methods like union(), intersection(), and difference() were added in ES2024/ES2025 and are supported in current versions of all major browsers; older browsers require a manual loop-based fallback.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Sets Next Lesson → JS Maps

JS Set Logic

Union: Combining Two Sets

Intersection: Finding Shared Items

Difference: Finding What's Unique to One Set

Other Set Relationship Checks

Fallback for Older Browsers

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code