Filter array based on another array in JavaScript

Javascript Web Development Front End Technology

In this article, we are going to learn how to filter an array based on another array in JavaScript.

An Array in JavaScript is used to store different elements. These elements are stored at contiguous memory locations. By using index numbers, we can access any or each data element present in the array. Index numbers will start form 0.

Syntax

Following is the syntax of the array in JavaScript –

const array_name = [item1, item2, ...];

The following is the simple declaration of array in JavaScript,

Const colors = ['Blue', 'Limegreen', 'Orange', 'Black'];

Let’s assume some simple input and output scenarios -

Let’s assume a scenario where we have two arrays holding elements in it and some elements are common in both arrays. We need to filter the common elements.

Input arr1 = [1, 3, 7, 10];
   arr2 = [3, 7];
Output = [1, 10];

Consider another scenario, where there are common elements(strings) in both arrays filter the common strings and return the unique elements.

Input arr1 = ['ravi', 'kunal', 'hari'];
   arr2 = ['ravi', 'sharma'];
Output arr1 = ['kunal', 'hari']
   arr2 = ['sharma']

Using array.filter() method

The filter() method generates a new array with elements that pass a test specified by a function. For empty elements, the filter() method does not execute the function.

Example

Following is an example of a filter array based on another array using array.filter() method.

<!DOCTYPE html>
<html>
<head>
   <title>Filtering array on another array</title>
</head>
<body>
   <script>
      const array1 = [1, 3, 7, 10, 17, 18, 33, 45, 99];
      const array2 = [10, 17, 33];
      const filterArray = (array1, array2) => {
         const filtered = array1.filter(el => {
            return array2.indexOf(el) === -1;
         });
         return filtered;
      };
      document.write(filterArray(array1, array2));
   </script>
</body>
</html>

Example

Following is another example of performing the given task using filter() method.

<!DOCTYPE html>
<html>
<head>
   <title>Filtering array on another array</title>
</head>
<body>
   <script>
      var arr = [6, 1, 9, 4, 7].filter(
         function(e) {
            return this.indexOf(e) < 0;
         },
         [1, 4, 7]
      );
      document.write("Filtered array is: ", arr);
   </script>
</body>
</html>

Example

The below program is another way to solve the task by using filter() method -

<!DOCTYPE html>
<html>
<head>
   <title>Filtering array on another array</title>
</head>
<body>
   <script>
      let arr1 = ['Govind', 'Alekhya', 'Sarika', 'Raviteja', 'Pooja'];
      let arr2 = ['Alekhya', 'Pooja'];
      arr1 = arr1.filter(function(item) {
         return !arr2.includes(item);
      })
      document.write(arr1);
   </script>
</body>
</html>

Example

Following one more way to solve the task is by using the filter() method and includes() method.

<!DOCTYPE html>
<html>
<head>
   <title>Filtering array on another array</title>
</head>
<body>
   <script>
      function filter_array(){
         let arr1 = ['s', 'r', 'a', 'k', 'i'];
         let arr2 = ['n', 's', 'k'];
         var tempArray = arr2.filter(function(item) {
            return !arr1.includes(item);
         });
         arr1 = arr1.filter(function(item) {
            return !arr2.includes(item);
         });
         arr2 = tempArray;
         document.write(arr1, "<br>");
         document.write(arr2);
      }
      filter_array();
   </script>
</body>
</html>