To get the union of two arrays in JavaScript, merge the arrays, create a new Set
object from the merged result to remove the duplicates, then convert it back to an array, i.e., Array.from(new Set([...arr1, ...arr2]))
.
For example:
function getUnion(arr1, arr2) {
return Array.from(new Set([...arr1, ...arr2]));
}
const array1 = [1, 2, 3, 4, 5];
const array2 = [4, 5, 6, 7, 8];
const union = getUnion(array1, array2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(union);
Array.from()
method
The Array from()
method converts Set
s and other iterable objects to arrays.
const set = new Set(['Paul', 'John', 'George', 'Ringo']);
const arr = Array.from(exampleSet);
console.log(arr); // ['Paul', 'John', 'George', 'Ringo']
const map = new Map();
map.set('Bob', 'Marley');
map.set('Mick', 'Jagger');
let arr2 = Array.from(map);
console.log(exampleArray2); // [ ['Bob', 'Marley'], ['Mick', 'Jagger'] ]
Set()
constructor
We create these sets with the Set
constructor, which can only contain unique values, so it removes any possible duplicates that may be in the array it receives.
const set = new Set([1, 1, 2, 3, 3, 4]);
console.log(Array.from(set)); // [1, 2, 3, 4]
Spread
syntax (...
)
To pass this array to the Set()
constructor, we use the spread syntax (...
) to merge the two arrays together. The spread syntax unpacks the value of each array into another array:
const array1 = [10, 20, 30];
const array2 = [40, 50, 60];
const mergedArray = [...array1, ...array2];
console.log(mergedArray);
Use Array concat()
to merge arrays for Set()
We could use the Array concat()
method in place of the spread syntax:
function getUnion(arr1, arr2) {
return Array.from(new Set(arr1.concat(arr2)));
}
const array1 = [1, 2, 3, 4, 5];
const array2 = [4, 5, 6, 7, 8];
const union = getUnion(array1, array2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(union);
Use Array from()
to convert Set
back to array
And we could use this spread syntax to replace the Array from()
, although this may make the code a bit less readable:
function getUnion(arr1, arr2) {
return [...new Set([...arr1, ...arr2])];
}
const array1 = [1, 2, 3, 4, 5];
const array2 = [4, 5, 6, 7, 8];
const union = getUnion(array1, array2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(union);
We can use the same principles to easily get the union of two sets in JavaScript.
Get union of two sets in JavaScript
To get the union of two sets in JavaScript, convert the sets to arrays and merge them, then create a Set
from the results of the merge.
For example:
function getUnion(set1, set2) {
return new Set([...set1, ...set2]);
}
const set1 = new Set(['a', 'b', 'c', 'd']);
const set2 = new Set(['c', 'd', 'e', 'f']);
const union = getUnion(set1, set2);
console.log(union); // Set(6) { 'a', 'b', 'c', 'd', 'e', 'f' }
Key takeaways
- To get the union of two arrays in JavaScript, create a new
Set
object from the merge of the two arrays, then convert thisSet
object to an array again, i.e.,Array.from(new Set(arr1.concat(arr2)))
. - We can do a similar thing to get the union of two sets, i.e.,
new Set([...set1, ...set2])
.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.