← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 26 of 26

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.
Syntax
javascript
const union = new Set([...setA, ...setB]);
const intersection = new Set([...setA].filter(x => setB.has(x)));
const difference = new Set([...setA].filter(x => !setB.has(x)));

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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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).

उदाहरण: 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.

उदाहरण: 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
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.