How JavaScript Compare Two Arrays of Objects for Differences?

“JavaScript compare two arrays of objects for differences” is mainly required to cross-check the object’s state between the client, which means frontend, and the server, which means backend. DB modification or UI modification will take place in the event of changes in the object’s state on any side.

To solve this issue, we can easily compare the array of object data using the Array.prototype.filter() and Array.prototype.some() methods.

The Array.prototype.filter() method is a JS built-in iterative method. This method uses a callback function. It calls the callbackFn function one time for every element of an array. It then creates a new array with all the values for which callbackFn returns a true value. The callback function does not include array elements in the new array if the test returns a false value. 

The Array.prototype.some() method is also a JS built-in iterative method. This method also uses a callback function. It makes one call to the supplied callbackFn function for every element in an array and continues until the callbackFn returns a truthy value unlike filter() method. Some() stops the array iteration if any element returns true. Otherwise, some() returns false.

So combining these two JS methods, we are going to check the first array elements with the second array elements. We apply the filter() method to the first array and compare elements one by one with the second array using the some() method. Apply the same technique for the second array as well. And eventually, we get one unique array.

Code Example: JavaScript Compare Two Arrays of Objects for Differences

<script>
   
   const course1 = [
   {id: 1, name: 'JavaScript', duration: 30},
   {id: 2, name: 'CSS', duration: 15},
   {id: 3, name: 'HTML', duration: 15},
   {id: 4, name: 'JQuery', duration: 12},
   {id: 5, name: 'TypeScript', duration: 12},
   {id: 6, name: 'Talewind', duration: 15},
   {id: 7, name: 'Angular', duration: 30}
   ];

   const course2 = [
   {id: 100, name: 'SQL', duration: 40},
   {id: 2, name: 'CSS', duration: 15},
   {id: 3, name: 'HTML', duration: 15},
   {id: 4, name: 'MySQL', duration: 40},
   {id: 5, name: 'Oracle', duration: 60},
   {id: 6, name: 'Mongo', duration: 30}
   ];

   // Find values that are in course1 object array 
   // but not in course2 object array

   function getCombinedUniqueArray(arr1,arr2){
      const distinctArr1 = arr1.filter(function(obj) {
         // JavaScript compare two arrays of objects for differences
         return !arr2.some(function(obj2) {
         return (obj.id === obj2.id && obj.name===obj2.name && obj.duration===obj2.duration);
         });
      });

      const distinctArr2 = arr2.filter(function(obj) {
         // compare two array of objects javascript   
         return !arr1.some(function(obj2) {
         return (obj.id === obj2.id && obj.name===obj2.name && obj.duration===obj2.duration);
         });
      });
   
      return (distinctArr1.concat(distinctArr2));

   } 

   console.log(getCombinedUniqueArray(course1,course2));

</script>

Output: Compare Two Array of Objects JavaScript

Code Explanation: How to Compare Two Array of Objects

In the above code, the first array is “course1” and the second array is “course2.” So how does JavaScript compare two arrays of objects for differences? First, apply the filter() method to the course1 array. Compare all three string and numeric properties (id, name, and duration) with the second array of objects and exit the some() method once a match is found. Continue a similar iteration for the second object in the course1 array until all elements are checked with course2 objects.

Apply the same process for the course2 array, and finally concatenate both new arrays and return the result to the console.

Modify getCombinedUniqueArray Using JS Arrow Function

You can use the JavaScript arrow function to modify the getCombinedUniqueArray() function. Look at the below:

   function getCombinedUniqueArray_Modified(arr1,arr2){

      const distinctArr1 =  arr1.filter(
         // JavaScript compare two arrays of objects for differences
         obj => !arr2.some(obj2 => obj.id === obj2.id && obj.name === obj2.name && obj.duration===obj2.duration)
      );

      const distinctArr2 =  arr2.filter(
         // compare two array of objects javascript
         obj2 => !arr1.some(obj => obj.id === obj2.id && obj.name === obj2.name && obj.duration===obj2.duration)
      );

         return ([...distinctArr1, ...distinctArr2]);

      }

This approach also perfectly showed how JavaScript compares two arrays of objects for differences.

Conclusion

So, how does JavaScript compare two arrays of objects for differences? We hope that we are able to generate a function using the array.filter() and array.some() methods. We also showed how you can modify a regular JS function to include an arrow function.

If our approaches resolve your JavaScript array find all duplicate objects problem, please let us know by leaving a comment in our comment thread. We will appreciate your effort. Happy Programming !!