New JavaScript Set methods

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 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)):

<div id="container">
  <div>
    <span>Set one</span>
    <ul id="set-one">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <span>Set two</span>
    <ul id="set-two">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
    </ul>
  </div>
</div>

<span>Subsets:</span>

<ul id="assertions">
  <li id="1subset2">Set one is a subset of set two</li>
  <li id="2subset1">Set two is a subset of set one</li>
</ul>

<span>Supersets:</span>

<ul id="assertions">
  <li id="1superset2">Set one is a superset of set two</li>
  <li id="2superset1">Set two is a superset of set one</li>
</ul>

const listOneItems = document.querySelectorAll("#set-one li");
const listTwoItems = document.querySelectorAll("#set-two li");
const assertItems = document.querySelectorAll("#assertions li");

const oneSubTwo = document.getElementById("1subset2");
const twoSubOne = document.getElementById("2subset1");

const oneSupTwo = document.getElementById("1superset2");
const twoSupOne = document.getElementById("2superset1");


const set1 = new Set();
const set2 = new Set();


listOneItems.forEach((item) => {
  set1.add(item.textContent);
});
listTwoItems.forEach((item) => {
  set2.add(item.textContent);
});

if (set2.isSubsetOf(set1)) {
  twoSubOne.textContent += " [TRUE]";
} else {
  twoSubOne.textContent += " [FALSE]";
}

if (set1.isSupersetOf(set2)) {
  oneSupTwo.textContent += " [TRUE]";
} else {
  oneSupTwo.textContent += " [FALSE]";
}

if (set2.isSupersetOf(set1)) {
  twoSupOne.textContent += " [TRUE]";
} else {
  twoSupOne.textContent += " [FALSE]";
}

if (set1.isSubsetOf(set2)) {
  oneSubTwo.textContent += " [TRUE]";
} else {
  oneSubTwo.textContent += " [FALSE]";
}

body {
  font-family: sans-serif;
}
#container {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}

li {
  font-weight: bold;
}

#container ul {
  border-radius: 10px;
  display: flex;
  gap: 2rem;
  padding: 1rem;
  justify-content: space-evenly;
  list-style: none;
  border: 1px solid black;
}

#set-one {
  background-color: paleturquoise;
}
#set-two {
  background-color: lightsteelblue;
}

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, plus some additional items.

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:

<div id="container">
  <div>
    <span>Set one</span>
    <ul id="set-one">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <span>Set two</span>
    <ul id="set-two">
      <li>C</li>
      <li>D</li>
      <li>E</li>
    </ul>
  </div>
  <div>
    <span>Set three</span>
    <ul id="set-three">
      <li>F</li>
      <li>G</li>
      <li>H</li>
    </ul>
  </div>
</div>

<span>Disjoint from:</span>

<ul>
  <li id="1disjointFrom2">Set one is disjoint from set two</li>
  <li id="2disjointFrom3">Set two is disjoint from set three</li>
  <li id="3disjointFrom1">Set three is disjoint from set one</li>
</ul>

body {
  font-family: sans-serif;
}
#container {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}

li {
  font-weight: bold;
}

#container ul {
  border-radius: 10px;
  display: flex;
  gap: 2rem;
  padding: 1rem;
  justify-content: space-evenly;
  list-style: none;
  border: 1px solid black;
}

#set-one {
  background-color: paleturquoise;
}
#set-two {
  background-color: lightsteelblue;
}

#set-three {
  background-color: lavender;
}

const listOneItems = document.querySelectorAll("#set-one li");
const listTwoItems = document.querySelectorAll("#set-two li");
const listThreeItems = document.querySelectorAll("#set-three li");


const set1 = new Set();
const set2 = new Set();
const set3 = new Set();


listOneItems.forEach((item) => {
  set1.add(item.textContent.trim());
});
listTwoItems.forEach((item) => {
  set2.add(item.textContent.trim());
});
listThreeItems.forEach((item) => {
  set3.add(item.textContent.trim());
});


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]";
}

Related News