How to check whether an array is a subset of another array using JavaScript?


The first array is the subset of the second array if the second array contains all elements of the first array. So, sometimes we may be required to check if one array is the subset of another.

In this tutorial, we will learn to check if one array is a subset of another array using three different approaches.

Use the for loop and array.includes() method

Users can use the for loop to iterate through every element of the first array. After that, they can use the includes() method to check if the second array contains every element of the first array.

If the second array contains all elements of the first array, the first array is the subset of the second array.

Syntax

Users can follow the syntax below to use the for-loop and the includes() method to determine whether one array is a subset of another.

for (let ele of array1) {
   if (!array2.includes(ele)) {
      return false;
   }
}

In the above syntax, we check if array1 is a subset of array2.

Algorithm

  • Step 1 − We will check if array1 is a subset of array2.

  • Step 2 − Iterate through every element of an array using the for-of loop.

  • Step 3 − Use the array.includes() method to check if every element of array1 is included in array2.

  • Step 4 − If any single element from array1 is not included in array2, return false.

  • Step 5 − If array2 contains all elements of array1, for-loop iteration will be successful and return true.

Example

We created the three arrays containing the different number values in the example below. We created the isSubset() function, which takes two arrays as a parameter. The function checks if array1 is a subset of array2 and returns the boolean value based on that.

We are checking if array2 and array3 are subsets of array1. Users can observe the result in the output.

<html>
<body>
   <h3>Using the <i>for loop and includes() method</i> to determine if one array is a subset of another array.</h3>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let array1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
      let array2 = [20, 30, 70, 80];
      let array3 = [20, 43, 45];
      function isSubset(array1, array2) {
         // Iterating through all the elements of array1
         for (let ele of array1) {
            // check if array2 contains the element of array1
            if (!array2.includes(ele)) {
               output.innerHTML += "The " + array1 + " is not a subset of " + array2 + "<br>";
               return false;
            }
         }
         output.innerHTML += "The " + array1 + " is a subset of " + array2 + "<br>";
         // If array1 contains all elements of array2 return true
         return true;
      }
      isSubset(array2, array1);
      isSubset(array3, array1)
   </script>
</body>
</html>

Use the array.some() and array.indexOf() method

The array.some() method takes a callback function as a parameter that returns the boolean values based on at least one element of the reference array following the condition.

The array.indexOf() method returns the element's index if it exists in the array; Otherwise, it returns -1. So, if we find any element of the first array, which has an index of -1 in the second array, it means the first array is not a subset of the second array.

Syntax

Users can follow the syntax below to use the array.some() and array.indexOf() method to check if one array is a subset of another array.

let isSubset = !data2.some((string) => data1.indexOf(string) == -1);

In the above syntax, if some() method returns true, the data1 array is not a subset of data2. So, we are storing its opposite boolean value in the isSubset variable.

Example

The example below contains the two arrays of strings and checks that the data1 array is the subset of the data2 array. The data1 array contains all elements of data2. So, users can see in the output that it says the data2 array is a subset of data1.

<html>
<body>
   <h3>Using the <i>array.some() and array.indexOf() method</i> to check if one array is a subset of another.</h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      let data1 = ["Hello", "Hi", "Users"];
      let data2 = ["Hello", "Users"];
      let isSubset = !data2.some((string) => data1.indexOf(string) == -1);
      if (isSubset) {
         output.innerHTML += "The " + data2 + " is a subset of " + data1 + " array. <br>";
      } else {
         output.innerHTML += "The " + data2 + " is not a subset of " + data1 + " array. <br>";
      }
   </script>
</body>
</html>

Use the array.every() method and set()

The array.every() method returns true if every element satisfies the condition returned by the callback function.

We can create the set() of all array elements, as the set contains a unique array element.

Syntax

Follow the syntax below to use the set and every() method.

let setOfArray = new Set(num1);
let result = num2.every(num => setOfArray.has(num));

Example

In the example below, we have created the set of all elements of the num1 array. After that, we check that set contains every element of the num2 array using the has() method of javascript sets.

<html>
<body>
   <h3>Using the <i>array.every() method and set</i> to check if one array is a subset of another array.</h3>
   <p id="output"></p>
   <button onclick="checkForSubset()">Check for subset</button>
   <script>
      let output = document.getElementById("output");
      let num1 = [45, 65, 45, true, false, 45, 43, 32];
      let num2 = [false, true, false, true];
      function checkForSubset() {
         // create a set of the parent array
         let setOfArray = new Set(num1);
         // Check if every element of the child array is in the set of the parent array
         let result = num2.every(num => setOfArray.has(num));
         if (result) {
            output.innerHTML += "The " + num2 + " is a subset of " + num1 + " array. <br>";
         } else {
            output.innerHTML += "The " + num2 + " is not a subset of " + num1 + " array. <br>";
         }
      }
   </script>
</body>
</html>

Updated on: 19-Jan-2023

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements