JavaScript Map & Set
JavaScript Set Operations
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
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.
The Three Operations
Union - everything from both sets.
Intersection - only what appears in both.
Difference - what is in the first but not the second.
Syntax
Syntax
javascript
new Set([...a, ...b]);
[...a].filter(v => b.has(v));has is what makes the filter fast.
Union
Spread both into one Set and duplicates disappear.
Example
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.
Intersection
Keep only the values the other set also has.
Example
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.
Difference
Keep the values the other set does not have.
Example
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.
Difference Is Not Symmetric
Swapping the sets gives a different answer.
Example
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.
Checking for a Subset
Every value of one set appearing in the other.
Example
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
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>Try It Yourself
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.
Important Points
- Union spreads both sets into a new one.
- Intersection filters by what the other set has.
- Difference filters by what it does not have.
- Difference depends on which set comes first.
everychecks for a subset.
Conclusion
Set operations turn awkward loops into single readable lines.
has keeps them fast even on large collections.
Remember that difference is not symmetric.