How to compare arrays in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn how to compare arrays in JavaScript using various methods. We will check whether each element present in one array is equal to the counterpart of the other array or not. If both the arrays are the same, then we will return true. Else, we will return false.

When comparing two arrays, we cannot use the “==” or “===” operator because it will compare the addresses of the memory block to which both the arrays are pointing. Hence from this, we will get a false result.

Now, we will see methods for comparing arrays in JavaScript.

Using the for Loop

In this method, we will check whether the size of the given arrays is the same or not. If the size of arrays is not equal, then we can directly say that arrays are not the same or equal. And if the size is equal, we will further check all elements of an array using one for a loop. Whenever we get any element that is not matched with an element of another array, we will return false.

Syntax

Users can follow the below syntax to compare arrays using the for a loop.

// check length of the array
if (array1.length != array2.length) {
 
   // array is not same
}
else {

   // compare all elements of array one by one
   for (let i = 0; i < a1.length; i++) {
      if (a1[i] != a2[i]) {
      return false;
   }
}

Example

In this example, we have four arrays x[ ], y[ ], w[ ] and z[ ]. We will make one function to compare arrays. We will pass two arrays to the function, and it will return true if both arrays are the same and return false if both arrays have different elements.


<html>
<head>
</head>
<body>
   <h2>Compare arrays in JavaScript</h2>
   <h4>Comparing two arrays using <i>for loop</i>.</h4>
   <p id="div1"> </p>
   <p id="div2"> </p>
   <script>
      function compare_arrays(a1, a2) {
         if (a1.length != a2.length) {
            return false;
         }
         else {
            for (let i = 0; i < a1.length; i++) {
               if (a1[i] != a2[i]) {
                  return false;
               }
            }
            return true;
         }
      }
      const x = [2, 4, 7, 9];
      const y = [2, 4, 7, 9];
      const w = [2, 3, 5, 7];
      const z = [2, 4, 3, 1];
      let Div1 = document.getElementById("div1");
      let Div2 = document.getElementById("div2");
      const ans1 = compare_arrays(x, y);
      const ans2 = compare_arrays(w, z);
      if (ans1) {
         Div1.innerHTML = "elements of array x and y are same."
      }
      else {
         Div1.innerHTML = "elements of array x and y are different."
      }
      if (ans2) {
         Div2.innerHTML = "elements of array w and z are same."
      }
      else {
         Div2.innerHTML = "elements of array w and z are different."
      }
   </script>
</body>
</html>

Using JSON.stringify()

JavaScript JSON.stringify() is the method that converts an array into a JSON string, and then it will compare two array strings using “==”

Syntax

Users can follow the below syntax to use the JSON.stringify() method.

const result = JSON.stringify(arr);

Example

In this example, we have two arrays x[ ] and y[ ]. We will compare both arrays using JSON.stringify() method.


<html>
<head>
</head>
<body>
   <h2>Compare arrays in JavaScript</h2>
   <h4>Comparing two arrays by <i>JSON.stringify()</i> method.</h4>
   <p id = "div1"></p>
   <script>
      const x = [2, 4, 7, 9];
      const y = [2, 4, 7, 9];
      let Div1 = document.getElementById("div1");
      if( JSON.stringify(x) == JSON.stringify(y) ){
         Div1.innerHTML="elements of arrays are same."
      }
      else{
         Div1.innerHTML="elements of arrays are different."
      }
   </script>
</body>
</html>

By using JSON.stringify() method we can compare two arrays in JavaScript.

In this tutorial, we learned how to compare arrays in JavaScript. In one method, we use for loop, whereas in the second, we use JSON.stringify() JavaScript method to compare arrays.