Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to find every element that exists in any of two given arrays once using JavaScript?
In this tutorial, we will learn how to find every element that exists in any of two given arrays once. This means creating a new array containing all unique elements from both arrays, with no duplicates.
For example, given two arrays:
Input
const arr1 = [1, 2, 3, 4, 5] const arr2 = [1, 4, 9, 16, 25]
Output
result = [1, 2, 3, 4, 5, 9, 16, 25]
Input
const arr1 = ['Deepansh', 'Aditya', 'Rishabh', 'Rishit'] const arr2 = ['Vikrant', 'Rishabh', 'Mohit', 'Rishit']
Output
result = ['Deepansh', 'Aditya', 'Rishabh', 'Rishit', 'Vikrant', 'Mohit']
There are three main approaches to achieve this result:
Using Array.forEach() with indexOf()
This approach loops through one array and checks if each element exists in the other array using indexOf():
<!DOCTYPE html>
<html>
<head>
<title>Array Union Example</title>
</head>
<body>
<h2>Finding Union of Two Arrays</h2>
<p id="result"></p>
<script>
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 4, 9, 16, 25];
const findUnion = (arr1, arr2) => {
let result = [...arr1]; // Copy first array
let len = result.length;
arr2.forEach(value => {
if (result.indexOf(value) === -1) {
result[len] = value;
len++;
}
});
return result;
};
let union = findUnion(arr1, arr2);
document.getElementById('result').innerHTML = 'Union: [' + union.join(', ') + ']';
</script>
</body>
</html>
Union: [1, 2, 3, 4, 5, 9, 16, 25]
Using Set (Recommended)
The Set approach is more efficient as it automatically handles duplicates:
<!DOCTYPE html>
<html>
<head>
<title>Set Union Example</title>
</head>
<body>
<h2>Using Set for Array Union</h2>
<p id="demo"></p>
<script>
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 4, 9, 16, 25];
const findUnionWithSet = (arr1, arr2) => {
const unionSet = new Set([...arr1, ...arr2]);
return Array.from(unionSet);
};
let result = findUnionWithSet(arr1, arr2);
document.getElementById('demo').innerHTML = 'Union: [' + result.join(', ') + ']';
</script>
</body>
</html>
Union: [1, 2, 3, 4, 5, 9, 16, 25]
Using concat() and filter()
This approach combines arrays and filters out duplicates:
<!DOCTYPE html>
<html>
<head>
<title>Filter Union Example</title>
</head>
<body>
<h2>Using concat() and filter()</h2>
<p id="output"></p>
<script>
const arr1 = ['Deepansh', 'Aditya', 'Rishabh', 'Rishit'];
const arr2 = ['Vikrant', 'Rishabh', 'Mohit', 'Rishit'];
const findUnionWithFilter = (arr1, arr2) => {
return arr1.concat(arr2.filter(item => arr1.indexOf(item) === -1));
};
let union = findUnionWithFilter(arr1, arr2);
document.getElementById('output').innerHTML = 'Union: [' + union.join(', ') + ']';
</script>
</body>
</html>
Union: [Deepansh, Aditya, Rishabh, Rishit, Vikrant, Mohit]
Comparison
| Method | Performance | Readability | Best For |
|---|---|---|---|
| forEach + indexOf | O(n²) | Good | Small arrays |
| Set | O(n) | Excellent | All cases (recommended) |
| concat + filter | O(n²) | Good | Functional programming style |
Conclusion
The Set approach is the most efficient and readable method for finding the union of two arrays. It automatically handles duplicates and provides the best performance for large datasets.
Updated on: 2026-03-15T23:19:00+05:30
271 Views
Advertisements