---
title: "New JavaScript Set methods"
date: "2024-06-26"
description: "The JavaScript Set object has new methods that now have cross-browser support, so let's have a look at what they can do and why they're interesting."
author: "Brian Smith"
canonical: "https://bsmth.de/mdn-javascript-set-methods/"
tags: ["GitHub","JavaScript","MDN","Baseline"]
---
# New JavaScript Set methods
There's some fresh JavaScript Set features that have just achieved cross-browser support, so let's have a look at what they can do.
Read on if you're new to `Set` in JavaScript and you're curious how to use these new JavaScript methods.
I'll highlight some advantages with basic examples to show why you might reach for these instead of building your own implementations.
## What's new in Set methods?
For those of you looking for the TL;DR, here's the gist of new methods that have cross-browser support:
- [`intersection()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection) returns a **new set** with the elements that are in **both** this set and the given set.
- [`union()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union) returns a **new set** with all elements in this set and the given set.
- [`difference()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference) returns a **new set** with elements in this set but not in the given set.
- [`symmetricDifference()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference) returns a **new set** with elements in either set, but not in both.
- [`isSubsetOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf) returns a **boolean** indicating if all elements of this set are in a another set.
- [`isSupersetOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf) returns a **boolean** indicating if all elements of another set are in a this set.
- [`isDisjointFrom()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom) returns a **boolean** indicating if this set has no elements in common with another set.
If you're confused, don't worry, we'll describe what they do in the following sections.
In a nutshell, each of these methods are used to check what the contents of a set is compared to the contents of another set.
## What is a JavaScript Set?
A set is similar to an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), except that each value can only be stored once.
To demonstrate this, we can take a list of items, add them all to a set, and then inspect the results of the set.
Let's see how these work in the following example:
```html
My list
- apple
- pear
- carrot
- pear
- apple
- yoshi
```
Let's grab the `` items, add them all to a new Set, and put them under ``:
```js
const allListItems = document.querySelectorAll("li");
const setList = document.getElementById("set");
const mySet = new Set();
allListItems.forEach((item) => {
mySet.add(item.textContent);
});
// List the set contents in new - elements:
mySet.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
setList.appendChild(li);
});
```
In the combined output, we have two ordered list elements.
The `
` on the right is the contents of the `` list on the left, but it's been converted to a set.
We have all duplicates removed from the list because we're **guaranteed that a set is unique**:
_There's a live preview of this example at ._
This might not look like much in a small example such as this, but it's really convenient to have a built-in way to make unique collections of items, especially over larger data and more complex data types and objects.
For example, consider that you can add elements to a set like so:
```js
const dogs = new Set();
const yoshi = { name: "Yoshi", personality: "Friendly" };
dogs.add(yoshi);
```
It's also typically faster to check if an element is in a set as opposed to in an Array, so this fits use cases where you have a large data structure and you need to keep an eye on performance of lookups.
You can also compose new sets with specific logical properties based on existing sets, and we'll take a look at some examples of that below.
We'll be covering all of the new methods below, but if you want to see everything you can do with a `Set`, check the [Instance methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#instance_methods) documentation.
## Union of two sets
A **union** is a good place to start off if you're not familiar with sets.
With the union, we can check what elements are in 'either or both' sets.
In the example below, we have two lists and we want to make a third one that contains all items from both lists, but without duplicates:
```html
Set one
- apple
- banana
- pear
- carrot
Set two
- banana
- peach
- plum
- apple
```
```js
const listOneItems = document.querySelectorAll("#set-one li");
const listTwoItems = document.querySelectorAll("#set-two li");
const allListItems = document.querySelectorAll("li");
const unionList = document.getElementById("union");
// Create sets for each list
const set1 = new Set();
const set2 = new Set();
// Add list items to each set
listOneItems.forEach((item) => {
set1.add(item.textContent);
});
listTwoItems.forEach((item) => {
set2.add(item.textContent);
});
```
```js
// Create a union of both sets
const unionSet = set1.union(set2);
// List the items in the union
unionSet.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
unionList.appendChild(li);
});
```
_There's a live preview of this example at ._
We're using the HTML [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of each list item so we have sets of strings, but you can see how this can be powerful if we consider that sets can contain data types like arrays or objects.
This is helpful because we don't need any custom implementations to remove duplicates, do equality checks, or make other comparisons.
Once we have elements in a set, we know they're all unique, and the `union` method is an optimized way to make a third set of (unique) items that appear in 'either or both' sets.
## Set intersection
With set intersection, we can check what elements occur in both sets to see what the overlap is.
In this example, instead of displaying the intersection set as a third list like we did with `union` above, we can use it to highlight elements that are 'both sets only':
```js
// Make the intersection set
const intersectionSet = set1.intersection(set2);
// Loop through lists and highlight if they're in the intersection
allListItems.forEach((item) => {
if (intersectionSet.has(item.textContent)) {
item.className = "match";
}
});
```
_There's a live preview of this example at ._
## Set symmetric difference
Before we look at difference, let's look at `symmetricDifference` which might sound complex, but hopefully the example below demystifies that.
What the symmetric difference does is lets us check which elements are in either set, but **not both**.
```js
const setNotBoth = set1.symmetricDifference(set2);
allListItems.forEach((item) => {
if (setNotBoth.has(item.textContent)) {
item.className = "match";
}
});
```
_There's a live preview of this example at ._
If this is all new and you're struggling to understand, compare the _symmetric difference_ with the _intersection_ example.
You should see that the `symmetricDifference` method does the opposite logical operation of the `intersection`.
## Set difference
With set difference, we can check which elements are in one set but not in another.
For this example, we are creating two new sets instead of one.
The first one (`set1only`) is created with `set1.difference(set2)` and what we get back is a new set of items that are 'set one only'.
We do the same with the new set `set2only` to find items that are in set two but not in the first one.
For each list, we can use the sets created with `difference` to highlight list items that don't appear in the other list.
```js
const set1only = set1.difference(set2);
const set2only = set2.difference(set1);
allListItems.forEach((item) => {
if (set1only.has(item.textContent)) {
item.className = "setOneMatch";
} else if (set2only.has(item.textContent)) {
item.className = "setTwoMatch";
}
});
```
_There's a live preview of this example at ._
## Subset, superset, and disjoint from
The last of the new methods and concepts that we can explore are subset, superset, and 'disjoint from' methods.
By now, you're familiar with the set operations that return new sets.
The subset, superset, and disjoint from methods don't return new sets, but a [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) value to indicate certain state or logical checks.
The first two we can look at are **subset** and **superset**.
Instead of highlighting list items, we have some statements or assertions like "Set one is a subset of set two".
We then add some text (`TRUE` / `FALSE`) to the list item depending on the result of a check like `if (set1.isSupersetOf(set2))`:
```js
if (set1.isSubsetOf(set2)) {
oneSubTwo.textContent += " [TRUE]";
} else {
oneSubTwo.textContent += " [FALSE]";
}
```
_There's a live preview of this example at ._
So with **subset**, we can check if all the items from a set appear in another set or not.
With **superset**, we're doing the opposite, to see if a set has all items from another set, with some additional items.
**Note** that if the two sets are equal, they'll satisfy both `isSubsetOf()` and `isSupersetOf()` methods:
```js
const one = new Set([4, 8, 12]);
const two = new Set([4, 8, 12]);
console.log(one.isSubsetOf(two)); // true
console.log(one.isSupersetOf(two)); // true
```
The last method for us to look at is `isDisjointFrom()` where we can find out if two sets have **no common elements**.
The first and second sets below are not disjoint from each other as they have one element ("C") in common.
The third set is disjoint from the other two as it has no items in common with either set:
```js
// Assertions
const oneDisjointTwo = document.getElementById("1disjointFrom2");
const twoDisjointThree = document.getElementById("2disjointFrom3");
const threeDisjointOne = document.getElementById("3disjointFrom1");
if (set1.isDisjointFrom(set2)) {
oneDisjointTwo.textContent += " [TRUE]";
} else {
oneDisjointTwo.textContent += " [FALSE]";
}
if (set2.isDisjointFrom(set3)) {
twoDisjointThree.textContent += " [TRUE]";
} else {
twoDisjointThree.textContent += " [FALSE]";
}
if (set3.isDisjointFrom(set1)) {
threeDisjointOne.textContent += " [TRUE]";
} else {
threeDisjointOne.textContent += " [FALSE]";
}
```
_There's a live preview of this example at ._
## That's a wrap
I hope you enjoyed this post about `Set` methods and why I think sets are an interesting concept to understand.
Feel free to [get in touch on Bluesky](https://bsky.app/profile/bsmth.de) if you have any feedback or if you want to say hi.
You should be all `Set` for your next project, so see you next time!
**Honorable mentions:** Thanks to these people who gave me a shout-out for my blog post:
- [New JavaScript Set methods](https://frontendmasters.com/blog/new-javascript-set-methods/) by Chris Coyier on frontendmasters.com
## See also
- [The JavaScript Set methods are now part of Baseline](https://web.dev/blog/set-methods) by Adriana Jara on web.dev
- [Read the Hacker News discussion](https://news.ycombinator.com/item?id=40772387) about this post