JavaScript Set Methods

Modern JavaScript Set methods perform common mathematical set operations directly. You can combine values, find shared entries, remove entries found in another set, or test relationships without writing manual loops.

These methods return clear results while keeping the original sets unchanged. They work well for permissions, selected filters, tags, course lists, and other collections of unique values.

Set equality follows SameValueZero rules. Objects match only when both sets contain the same object reference.

JavaScript Set Operation Methods

  • union() returns values found in either set.
  • intersection() returns values found in both sets.
  • difference() returns values in the first set but not the second.
  • symmetricDifference() returns values found in only one set.
  • isSubsetOf(), isSupersetOf(), and isDisjointFrom() return Boolean results.

Creating Sets

Example:

// Duplicate values are stored only once
const frontend = new Set(["HTML", "CSS", "JavaScript", "CSS"]);
console.log(frontend.size); // 3

Using union() and intersection()

Example:

// Combine both sets and find their shared values
const riya = new Set(["HTML", "CSS", "JavaScript"]);
const oliver = new Set(["CSS", "JavaScript", "Python"]);

console.log([...riya.union(oliver)]);
console.log([...riya.intersection(oliver)]);

Using difference() and symmetricDifference()

difference() depends on the receiver. a.difference(b) is not generally the same as b.difference(a).

Example:

// Find values unique to one side
const onlyRiya = riya.difference(oliver);
const uniqueToEither = riya.symmetricDifference(oliver);

console.log([...onlyRiya]);       // ["HTML"]
console.log([...uniqueToEither]); // ["HTML", "Python"]

Testing Set Relationships

Example:

// Relationship methods return true or false
const required = new Set(["HTML", "CSS"]);
const skills = new Set(["HTML", "CSS", "JavaScript"]);

skills.isSupersetOf(required); // true
required.isSubsetOf(skills);   // true
required.isDisjointFrom(new Set(["Python"])); // true

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Set Methods Demo</title>
    <style>
        body { max-width: 680px; margin: 2rem auto; padding: 0 1rem; font-family: Arial, sans-serif; line-height: 1.6; }
        button { padding: 0.6rem 1rem; cursor: pointer; }
        output { display: block; margin-top: 1rem; padding: 1rem; background: #eef5fa; }
    </style>
</head>
<body>
    <h1>Compare Course Selections</h1>
    <p>Riya: HTML, CSS, JavaScript</p>
    <p>Oliver: CSS, JavaScript, Python</p>
    <button type="button" id="compare">Compare sets</button>
    <output id="result"></output>
    <script>
        // Use modern Set methods without changing either original Set.
        const riya = new Set(['HTML', 'CSS', 'JavaScript']);
        const oliver = new Set(['CSS', 'JavaScript', 'Python']);
        document.querySelector('#compare').addEventListener('click', () => {
            const all = riya.union(oliver);
            const shared = riya.intersection(oliver);
            const onlyRiya = riya.difference(oliver);
            document.querySelector('#result').textContent =
                `All: ${[...all].join(', ')} | Shared: ${[...shared].join(', ')} | Only Riya: ${[...onlyRiya].join(', ')}`;
        });
    </script>
</body>
</html>

Set-Like Arguments

The argument can be set-like when it provides size, has(), and keys(). A Map is set-like over its keys. The receiver itself must be a real Set.

Browser Support and Fallbacks

The new Set methods are available across current major browsers. Check older browsers and runtimes before deployment. A maintained polyfill is safer than mixing several custom helpers with different ordering or object-reference behavior.

Best Practices

  1. Choose the receiver deliberately for difference().
  2. Convert results to arrays only when an array API or display requires it.
  3. Do not expect separate but identical objects to match.
  4. Keep the original sets when later operations still need them.
  5. Feature-detect or polyfill for older environments.

Conclusion

JavaScript Set methods make union, intersection, difference, and relationship checks direct and readable. Choose the operation that expresses your intent, remember object identity rules, and verify runtime support.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram