JavaScript Map & Set
Sets can be combined to find values in common, or values in one but not the other.
These are the classic set operations from mathematics.
Each takes one line using spread and filter.
Example
javascript
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const union = new Set([...a, ...b]);
console.log([...union].join(","));The output is 1,2,3,4, with the duplicates removed.
Union - everything from both sets.
Intersection - only what appears in both.
Difference - what is in the first but not the second.
Syntax
javascript
new Set([...a, ...b]);
[...a].filter(v => b.has(v));has is what makes the filter fast.
Spread both into one Set and duplicates disappear.
Example
javascript
const a = new Set(["red", "green"]);
const b = new Set(["green", "blue"]);
console.log([...new Set([...a, ...b])].join(","));Green appears once, not twice.
Keep only the values the other set also has.
Example
javascript
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const shared = [...a].filter(function (value) {
return b.has(value);
});
console.log(shared.join(","));The output is 2,3.
Keep the values the other set does not have.
Example
javascript
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const onlyInA = [...a].filter(function (value) {
return !b.has(value);
});
console.log(onlyInA.join(","));The output is 1.
Swapping the sets gives a different answer.
Example
javascript
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const onlyInB = [...b].filter(function (value) {
return !a.has(value);
});
console.log(onlyInB.join(","));The output is 4, not 1.
Every value of one set appearing in the other.
Example
javascript
const small = new Set([1, 2]);
const big = new Set([1, 2, 3]);
const isSubset = [...small].every(function (value) {
return big.has(value);
});
console.log(isSubset);The output is true.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Set Operations</title>
</head>
<body>
<h1>Set Operations</h1>
<p id="out"></p>
<script>
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
const union = [...new Set([...a, ...b])];
const shared = [...a].filter(function (v) { return b.has(v); });
const onlyInA = [...a].filter(function (v) { return !b.has(v); });
document.getElementById("out").innerHTML =
"Union: " + union.join(", ") +
"<br>In both: " + shared.join(", ") +
"<br>Only in A: " + onlyInA.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try swapping the sets:
Compute only in B and see that it differs from only in A.
every checks for a subset.Set operations turn awkward loops into single readable lines.
has keeps them fast even on large collections.
Remember that difference is not symmetric.