Get Union Of Two Arrays In JavaScript

To get union of two arrays in JavaScript, you can use any of the following methods –

  1. Use the spread operator to merge the two arrays into a third array. Pass this third array to the Set() constructor to get unique elements from the merged array. Then convert the set back to an array.
  2. Use the Array.concat() method to merge the two arrays into a third array. Pass this third array to the Set() constructor to get unique elements from the merged array. Then convert the set back to an array.
  3. Use the for loop to iterate over one of the arrays. For each element in that array, check if it exists in the other array using Array.prototype.includes(). If it doesn’t exist, then push it to a new array. Then use the spread operator to merge the returned array with the second array. The merged array will have the union of the two arrays.
  4. Use the Array.reduce() method to iterate over the first array and return the array containing elements that are not present in the second array. Then use the spread operator to merge the returned array with the second array. The merged array will have the union of the two arrays.

Let’s discuss each of these methods in detail below.

Get Union Of Two Arrays In JavaScript

get union of two arrays in javascript

Use The spread Operator To Merge The Two Arrays

The spread operator allows us to split up array elements or object properties in a way that we could do with arrays. We can use the spread operator to merge two arrays into a third like this –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘b’, ‘f’];

const uniqueArray = Array.from(new Set([...arr1, ...arr2]));

console.log(uniqueArray);

// [‘a’, ‘b’, ‘c’, ‘d’, ‘f’]

In the above code, we have two arrays – arr1 and arr2. We use the spread operator (…) to merge these two arrays into a third array. Then we pass this third array to the Array.from() method along with new Set(). The Set object lets us store unique values of any type, whether primitive values or object references.

The Set constructor accepts an iterable (an array in our case) and then creates a new Set object with unique values from the iterable. Finally, we use the Array.from() method to convert the set back to an array. This new array will have all the unique elements from botharr1 and arr2.

Use The Array.concat() Method

We can also use the Array.concat() method to merge two arrays into a third like this –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘b’, ‘f’];

const uniqueArray = Array.from(new Set(arr1.concat(arr2)));

console.log(uniqueArray);

// [‘a’, ‘b’, ‘c’, ‘d’, ‘f’]

In the above code, we have two arrays – arr1 and arr2. We use the Array.concat() method to merge these two arrays into a third array. Then we pass this third array to the Array.from() method along with new Set(). The Set object lets us store unique values of any type, whether primitive values or object references.

The Set constructor accepts an iterable (an array in our case) and then creates a new Set object with unique values from the iterable. Finally, we use the Array.from() method to convert the set back to an array. This new array will have all the unique elements from both arr1 and arr2.

Use A for Loop To Iterate Over One Of The Arrays

We can also use a for loop to iterate over one of the arrays. For each element in that array, we can check if it exists in the other array using Array.prototype.includes(). If it doesn’t exist, then we can push it to a new array. This new array will have all the unique elements from both the arrays.

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘a’, ‘b’, ‘f’];

const difference = [];

for(let i=0; i < arr1.length; i++) {

 if(!arr2.includes(arr1[i])) {

     difference.push(arr1[i]);

 }

}

unique = [...difference, ...arr2];

console.log(unique);

// [‘c’, ‘d’, ‘b’, ‘f’]

In the above code, we have two arrays – arr1 and arr2. We use a for loop to iterate over arr1. For each element in that array, we check if it exists in the other array using Array.prototype.includes(). If it doesn’t exist, then we push it to a new array.

The unique array will have all the unique elements from both arr1 and arr2.

Use The Array.reduce() Method

We can also use the Array.reduce() method to merge two arrays into a third like this –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘b’, ‘f’];

const difference = arr1.reduce((accumulator, currentValue) => {

 if(!arr2.includes(currentValue)) {

    accumulator.push(currentValue);

 }

 return accumulator;

}, []);

unique = [...difference, ...arr2];

console.log(unique);

// [‘a’, ‘b’, ‘c’, ‘d’, ‘f’]

In the above code, we have two arrays – arr1 and arr2. We use the Array.reduce() method to merge these two arrays into a third array. The Array.reduce() method accepts a callback function as its first argument. This callback function takes two arguments – accumulator and currentValue.

The accumulator is the previous value returned by the callback function and currentValue is the current element being processed in the array. In our case, we use this callback function to check if each element of arr1 exists in arr2. If it doesn’t exist, then we push it to the accumulator array.

Then we use the spread operator (…) to merge the difference array with arr2. The unique array will have all the unique elements from both arr1 and arr2.

Conclusion – Get Union Of Two Arrays In JavaScript

In this article, we looked at four different ways to get union of two arrays in JavaScript. These methods are –

1. Use The Array.concat() Method

2. Use A for Loop To Iterate Over One Of The Arrays

3. Use The Array.reduce() Method

4. Use the […] operator

You can choose any of these methods depending on the situation. I hope this article was helpful. Thanks for reading! 🙂

Leave a Reply