Modern JavaScript is steadily gaining powerful new tools for working with collections of data. Among the most useful: a new set of methods on the built-in Set object. These methods make it much easier to compare sets, combine them, and derive new sets with specific properties—without resorting to manual loops or utility libraries.
Whether you are building front-end features, cleaning up business logic, or maintaining a shared component library, understanding these new Set methods can simplify your code and reduce bugs.
Key Takeaways
Setis a built-in JavaScript collection type that stores unique values with fast lookups.- New methods like
union,intersection,difference, andsymmetricDifferenceprovide clean set operations. - Methods such as
isSubsetOfandisSupersetOflet you compare sets directly. - These methods are implemented as static helpers and prototype methods for flexibility.
- Adopting them can reduce code complexity, improve readability, and make your data logic more predictable.
A Quick Refresher: What Is a JavaScript Set?
A JavaScript Set is a collection of unique values. Unlike arrays, a set automatically removes duplicates and does not guarantee index-based access. This makes sets ideal for tasks like:
- Tracking unique IDs (such as user IDs or feature flags).
- Filtering duplicates from an array of data.
- Checking membership quickly without repeatedly scanning an array.
Basic usage looks like this:
// Create a set
const ids = new Set([1, 2, 2, 3]);
console.log(ids); // Set(3) {1, 2, 3}
// Add and check values
ids.add(4);
console.log(ids.has(2)); // true
// Remove values
ids.delete(3);
Until recently, performing set operations like “union” or “intersection” required custom logic. Now, browsers are rolling out built-in methods that handle these use cases consistently.
The New Set Methods at a Glance
The new Set methods fall into two broad categories:
- Set operations: produce new sets based on existing ones.
- Comparison operations: check how sets relate to each other.
The main methods include:
Set.union(a, b)/a.union(b)Set.intersection(a, b)/a.intersection(b)Set.difference(a, b)/a.difference(b)Set.symmetricDifference(a, b)/a.symmetricDifference(b)Set.isSubsetOf(a, b)/a.isSubsetOf(b)Set.isSupersetOf(a, b)/a.isSupersetOf(b)Set.isDisjointFrom(a, b)/a.isDisjointFrom(b)
The static version takes two sets as arguments, while the instance method version lets you call them directly on a set instance. Internally, they behave the same—it’s mostly a matter of style and consistency in your codebase.
Set Operations: Creating New Sets from Old Ones
Union: Combine Values from Two Sets
What it does: Returns a new set containing all unique values that appear in either set.
const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);
// Instance method
const union1 = a.union(b); // Set {1, 2, 3, 4, 5}
// Static method
const union2 = Set.union(a, b);
Business use cases:
- Merging feature flags from multiple configuration sources.
- Combining customer segments (e.g., newsletter subscribers + webinar attendees).
Intersection: Find Common Values
What it does: Returns a new set containing values that exist in both sets.
const a = new Set(['basic', 'pro']);
const b = new Set(['pro', 'enterprise']);
const common = a.intersection(b); // Set {'pro'}
Business use cases:
- Identifying users who belong to multiple groups (e.g., paying customers who also joined a beta program).
- Finding overlapping tags across content, products, or permissions.
Difference: Values in One Set but Not the Other
What it does: Returns a new set of values that are in the first set but not in the second.
const existing = new Set(['A', 'B', 'C', 'D']);
const processed = new Set(['B', 'D']);
const remaining = existing.difference(processed); // Set {'A', 'C'}
Business use cases:
- Finding unprocessed orders or unassigned tasks.
- Determining which feature flags are in configuration A but not in configuration B.
Symmetric Difference: Values That Don’t Overlap
What it does: Returns a new set of values that appear in exactly one of the sets (not in both).
const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);
const symDiff = a.symmetricDifference(b); // Set {1, 2, 4, 5}
Business use cases:
- Spotting discrepancies between two data sources (e.g., CRM vs. email platform lists).
- Comparing permissions between two roles to see what is unique to each.
Comparison Operations: Understanding Relationships Between Sets
isSubsetOf: Check If One Set Is Contained in Another
What it does: Returns true if every value in the first set is also in the second set.
const required = new Set(['read', 'write']);
const userPerms = new Set(['read', 'write', 'delete']);
const ok = required.isSubsetOf(userPerms); // true
Business use cases:
- Validating that a user’s permissions cover all actions required for a workflow.
- Checking that a configuration includes all required options.
isSupersetOf: The Reverse Check
What it does: Returns true if the first set contains every value from the second set.
const rolePerms = new Set(['read', 'write', 'delete']);
const featureNeeds = new Set(['read', 'write']);
const canAccess = rolePerms.isSupersetOf(featureNeeds); // true
Business use cases:
- Ensuring a given role or plan level includes all features needed for a screen or module.
- Verifying that a selection of options covers a minimum required set.
isDisjointFrom: Confirm No Overlap
What it does: Returns true if the two sets have no elements in common.
const morningSlots = new Set(['9am', '10am']);
const afternoonSlots = new Set(['1pm', '2pm']);
const noConflict = morningSlots.isDisjointFrom(afternoonSlots); // true
Business use cases:
- Checking that scheduled events or resources do not conflict by category or tag.
- Confirming that two customer segments are mutually exclusive.
Static vs. Instance Methods: Which Should You Use?
The new methods come in both static and instance forms. For example:
Set.union(a, b)a.union(b)
They serve the same purpose. Choosing between them often comes down to consistency and personal or team style.
Instance style can feel more fluent:
const result = a
.union(b)
.difference(c)
.intersection(d);
Static style can be useful when you are working functionally and want to pass sets as values:
const result = Set.intersection(
Set.difference(Set.union(a, b), c),
d
);
In existing codebases, it can be helpful to standardize on one form to keep things predictable for future contributors.
Practical Tips for Using the New Set Methods
- Check browser support. These methods are relatively new, so confirm support in your target environments. For older browsers, you may need a polyfill.
- Use sets for membership, arrays for ordering. If you care about uniqueness and fast membership checks, sets are usually the better fit. If you care about ordering, indices, or frequent slicing, arrays still make sense.
- Convert as needed. You can always convert between arrays and sets:
const set = new Set(array);const array = [...set];
- Keep your logic expressive. Replace custom helper functions with these named methods so your intent is clear (e.g.,
a.intersection(b)is easier to read than a manually coded loop).
Conclusion: Cleaner Data Logic with Modern JavaScript Sets
As your application grows, data relationships become more complex: permissions, feature flags, audience segments, content tags, and more. The new JavaScript Set methods give you a concise, expressive way to handle those relationships:
- Use union, intersection, difference, and symmetricDifference to build new sets from existing ones.
- Use isSubsetOf, isSupersetOf, and isDisjointFrom to express business rules clearly.
By adopting these methods where it makes sense in your codebase, you can eliminate boilerplate loops, reduce errors, and make your business logic easier to reason about for everyone on the team.
If you are planning a new web application or modernizing an existing one and want help designing clean, maintainable front-end architecture, explore how Izende Studio Web supports small businesses and product teams at https://izendestudioweb.com/services/.