JavaScript Set Logic

Sets come from math, and math has a standard set of ways to combine and compare them: which items are in both groups, which are in either, which are in one but not the other. JavaScript has 7 built-in methods for them. They reached browsers in 2024 and became an official part of the language in its 2025 edition.

For every example in this lesson:

const soccer = new Set(["Ava", "Ben", "Cal", "Dee"]);
const band   = new Set(["Cal", "Dee", "Eli"]);

// union(): In Either

Everyone in soccer or band (or both), each listed once:

console.log([...soccer.union(band)]);

// intersection(): In Both

Students who do soccer and band:

console.log([...soccer.intersection(band)]);

// difference(): In the First, Not the Second

Soccer players who are not in band. Order matters here:

console.log([...soccer.difference(band)]);   // soccer only
console.log([...band.difference(soccer)]);   // band only

// symmetricDifference(): In Exactly One

Students in one activity but not both:

console.log([...soccer.symmetricDifference(band)]);

// Comparison Methods (Return true or false)

const starters = new Set(["Ava", "Cal"]);
const chess    = new Set(["Fay", "Gus"]);

starters.isSubsetOf(soccer)      // true   every starter is on the soccer team
soccer.isSupersetOf(starters)    // true   soccer contains all the starters
soccer.isDisjointFrom(chess)     // true   no one in common
soccer.isDisjointFrom(band)      // false  Cal and Dee are in both

// The Argument Must Be a Set

These methods need a Set (or a Map, whose keys are used) as the argument. An array does not work, even though new Set() happily accepts one:

const a = new Set([1, 2]);

console.log([...a.union(new Set([3]))]);   // works
console.log([...a.union([3])]);          // an array

The error mentions .size because the method looks for a size, and arrays have length instead. Wrap the array: a.union(new Set([3])).

// Summary

// For Older Browsers

These methods arrived in 2024. Browsers from before then do not have them. The same results can be built with spread and filter, which is also a good way to understand what each one does:

const union        = new Set([...soccer, ...band]);
const intersection = new Set([...soccer].filter(x => band.has(x)));
const difference   = new Set([...soccer].filter(x => !band.has(x)));

// Real Example: What Changed?

const yesterday = new Set(["ava", "ben", "cal"]);
const today     = new Set(["ben", "cal", "dee"]);

console.log("Joined:", [...today.difference(yesterday)]);
console.log("Left:",   [...yesterday.difference(today)]);
console.log("Stayed:", [...today.intersection(yesterday)]);

// Quick Check

const s = new Set(["a"]).union(["b"]);

// Try It

▶ Open Playground

1. Click Open Playground. Put your favorite foods and a friend's in the two Sets, then find the foods you both like
2. Find foods only you like, and foods only your friend likes
3. Check whether new Set("aeiou") is disjoint from new Set("rhythm")
4. Rebuild symmetricDifference using only spread, filter, and has