How to find the common elements between two or more arrays in JavaScript?

Arrays is typeof operator in JavaScript. Arrays can access its elements with the help of index numbers which starts with 0.

Let array = [“India”, “Australia”, “USA”];

There are enough number of ways to get the common elements from the arrays. Now, In this below scenario we use for loop for finding common arrays.

In this article, we are going to discuss how to find the common elements between two or more arrays in JavaScript.

Using for loop

One way to find the common elements between two or more arrays is using the simple for loop. Following are the steps to be followed −

Step 1 − Create an empty array.

Step 2 − Repeat all the items in one of the array using for loop.

Step 3 − Iterate the items of another array in this for loop.

Step 4 − If the Item matches in both arrays, then push it into common array.

Step 5 − Else, continue with the next item.

Example 1

Considering the above steps, we will perform the returning of common items by creating a function.

<!DOCTYPE html>
<html>
<title>Common elements between two arrays in JavaScript</title>
<head>
   <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>
</head>
<body>
</body>
</html>

Example 2

Let us consider another scenario, Arrays including both the string values as items and int values as items.

<!DOCTYPE html>
<html>
   <title> Common elements between two arrays in JavaScript</title>
<head>
   <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>
</head>
<body>
</body>
</html>

Using the forEach() method

The forEach() is a method in JavaScript which calls a function for each and every element in the array. And this method will not execute if there is an empty element. Following is the syntax of the JavaScript forEach() method −

array.forEach(function(currentValue, index, arr), thisValue)

Example 1

In this below scenario, we have performed the common elements of the array using forEach() method.

<!DOCTYPE html>
<html>
   <title>Common elements between two arrays in JavaScript using forEach() method.</title>
<head>
   <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>
</head>
<body>
</body>
</html>

Using the _.intersection() method

The _.intersection() method is used to find the intersection of one or more arrays. This method belongs to the Lodash, a JavaScript library that works on the top of underscore.js.

Example

In the following example we use the _.intersection() method to find the common elements between arrays – −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Find common elements between two or more arrays</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
   <div id="intersection"></div>
</head>
<body>
   <script>
      let arr1 = [10, 20, 40, 80];
      let arr2 = [30, 40, 20, 80];
      let arr3 = [40, 80, 60];
      let arr4 = [40, 80, "Alice", 70, 90];
      document.getElementById("intersection").innerHTML =
      "Common elements between arrays are : " +
      _.intersection(arr1, arr2, arr3, arr4);
   </script>
</body>
</html>

Using the filter() method

The filter method accepts a function as a parameter and filters the elements of the current array according to the given function.

Example 1

In the following example we are trying to find the common elements between two arrays using the filter() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Find common elements between two or more arrays</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
   <div id="common"></div>
</head>
<body>
   <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>

Using the reduce() method

The reduce() method is similar to the filter() method it accepts a reducer function as a parameter and reduces the elements of the current array based on the given function.

Example

In the following example we are trying to find the common elements between two arrays using the reduce() method −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Find common elements between two or more arrays</title>
   <h4>Common elements between arrays are :</h4>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
   <div id="common"></div>
   <input type="button" onclick="myFunction()" value="click here" />
</head>
<body>
   <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 (x, y) {
         content.innerHTML = arr.reduce((x, y) =>
            x.filter((z) => y.includes(z))
      );
      };
   </script>
</body>
</html>

Updated on: 19-Sep-2022

8K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements