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
How to find the common elements between two or more arrays in JavaScript?
In JavaScript, finding common elements between two or more arrays is a frequent requirement in web development. Arrays are objects that store multiple values, and there are several efficient methods to identify shared elements across them.
Using for Loop
The traditional approach uses nested for loops to compare each element of one array with every element of another array. This method works by creating an empty array and pushing matching elements into it.
Example 1
Here's how to find common elements between two numeric arrays:
<!DOCTYPE html>
<html>
<head>
<title>Common elements between two arrays in JavaScript</title>
</head>
<body>
<script>
function CommonItemsArray(array_1, array_2) {
var commonArray = []; // Create an array for common items in another two arrays.
for (var i = 0; i < array_1.length; i++) {
for (var j = 0; j < array_2.length; j++) {
if (array_1[i] == array_2[j]) { // If the item is common in both arrays
commonArray.push(array_1[i]); // Push common items to the array
}
}
}
return commonArray; // Return the common items
}
var array_1 = [10, 20, 30, 40, 50];
var array_2 = [20, 30, 60, 70, 90];
// Get common items of both array_1, array_2
var commonItem = CommonItemsArray(array_1, array_2);
document.write("The common elements present in both arrays are: ");
document.write(commonItem);
</script>
</body>
</html>
The common elements present in both arrays are: 20,30
Example 2
This method also works with mixed data types (strings and numbers):
<!DOCTYPE html>
<html>
<head>
<title>Common elements between two arrays in JavaScript</title>
</head>
<body>
<script>
function CommonItemsArray(array_1, array_2) {
var commonArray = []; // Create an array for common items in another two arrays.
for (var i = 0; i < array_1.length; i++) {
for (var j = 0; j < array_2.length; j++) {
if (array_1[i] == array_2[j]) { // If the item is common in both arrays
commonArray.push(array_1[i]); // Push common items to the array
}
}
}
return commonArray; // Return the common items
}
var array_1 = ["Vikram", 20, "Amar", 40, 50];
var array_2 = [10, "Vikram", 60, 40, "Shiva"];
// Get common items of both array_1, array_2
var commonItem = CommonItemsArray(array_1, array_2);
document.write("The common elements present in both arrays are: ");
document.write(commonItem);
</script>
</body>
</html>
The common elements present in both arrays are: Vikram,40
Using forEach() Method
The forEach() method provides a more functional approach. It executes a function for each array element, making the code more readable than traditional loops.
Syntax
array.forEach(function(currentValue, index, arr), thisValue)
Example
<!DOCTYPE html>
<html>
<head>
<title>Common elements between two arrays in JavaScript using forEach() method</title>
</head>
<body>
<script>
const array_1 = [11, "Virat", 33, "Pant", 55, 77]; // Creating Array1
const array_2 = [33, 66, "99", "Virat", 88, 77]; // Creating Array2
//Creating an empty array for pushing common elements
const uniqueArray = [];
// Finding the common elements in both arrays
array_1.forEach(ele1 => {
array_2.forEach(ele2 => ele1 === ele2 && uniqueArray.push(ele1));
});
//Printing the common arrays
document.write("The common elements in both the arrays are: ");
document.write(uniqueArray);
</script>
</body>
</html>
The common elements in both the arrays are: Virat,33,77
Using filter() Method
The filter() method creates a new array with elements that pass a test. Combined with includes(), it provides a clean way to find intersections.
Example
<!DOCTYPE html>
<html>
<head>
<title>Find common elements between two or more arrays</title>
</head>
<body>
<div id="common"></div>
<script>
let arr = [
[10, 20, 40, 80],
[30, 40, 20, 80],
[40, 80, 60],
[40, 80, "Alice", 70, 90],
];
let newArr = arr.reduce((x, y) => x.filter((z) => y.includes(z)));
document.getElementById("common").innerHTML =
"Common elements between arrays are: " + newArr;
</script>
</body>
</html>
Common elements between arrays are: 40,80
Using reduce() Method
The reduce() method applies a reducer function against an accumulator. It's particularly useful for finding intersections across multiple arrays.
Example
<!DOCTYPE html>
<html>
<head>
<title>Find common elements between two or more arrays</title>
</head>
<body>
<h4>Common elements between arrays are:</h4>
<div id="common"></div>
<input type="button" onclick="myFunction()" value="Click Here" />
<script>
let arr1 = [10, 20, 40, 80];
let arr2 = [30, 40, 20, 80];
let arr3 = [40, 80, 60];
let arr = [arr1, arr2, arr3];
let content = document.getElementById("common");
let myFunction = function () {
content.innerHTML = arr.reduce((x, y) =>
x.filter((z) => y.includes(z))
);
};
</script>
</body>
</html>
Common elements between arrays are: 40,80
Comparison
| Method | Performance | Readability | Browser Support |
|---|---|---|---|
| for loop | Good | Basic | All browsers |
| forEach() | Good | Better | ES5+ |
| filter() + reduce() | Excellent | Best | ES5+ |
Conclusion
Finding common elements between arrays can be accomplished using various methods. For modern applications, filter() with reduce() provides the most elegant solution, while traditional for loops offer maximum compatibility.
10K+ Views
