CodersTechZone
  • .NET
    • C#
    • ASP.Net
  • HTML
  • Javascript
  • CSS
  • Database
    • SQL Server
    • MYSql
    • Oracle
  • AI
  • TechNews
  • Web-Stories

How JavaScript Compare Two Arrays of Objects for Differences?

Shawpnendu Bikash Maloroy

June 16, 2024
How does JavaScript compare two arrays of objects for differences
Spread the love

“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.

Table of Contents

  • Code Example: JavaScript Compare Two Arrays of Objects for Differences
  • Output: Compare Two Array of Objects JavaScript
  • Code Explanation: How to Compare Two Array of Objects
  • Modify getCombinedUniqueArray Using JS Arrow Function
  • Conclusion

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

How Does JavaScript compare two arrays of objects for differences

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 !!

Shawpnendu Bikash Maloroy
Shawpnendu Bikash Maloroy

๐Ÿ‹๏ธโ€โ™‚๏ธ Discover Code Blocks From 20+ yrs JS Expert
๐Ÿ’ฅ Asp.net C# Developer
๐Ÿ† Solution Architect
๐Ÿ‘จโ€โœˆ๏ธ Database Administrator
๐Ÿ“ข Speaker
๐ŸŽ“ MCTS since 2009

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Spread the love
ยซPrevious
Nextยป

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • 7 Weird JavaScript Tricks That Look Like Bugs
    7 Weird JavaScript Tricks That Look Like Bugs (#3 Will Shock You!)
  • Build a JavaScript Gamer Journal in 8 Lines
    ๐ŸŽฎ Build a JavaScript Gamer Journal in 8 Lines: Track Your Wins Like a Pro! ๐Ÿ†
  • JavaScript Pet Feeder Reminder in 7 Lines
    How to Code a Simple JavaScript Pet Feeder Reminder in 7 Lines: Feed Your Pet Like a Coding Boss! ๐Ÿถ
  • 10-line calculator JavaScript
    Build a Simple Calculator in JavaScript: 10 Lines to Wow Your Friends!
  • JavaScript No-Code Automation
    JavaScript No-Code Automation: How to Replace Zapier with a Few Lines of Code

About-CodersTech Zone |  Contact |  Disclaimer |  Fact-Checking policy |  Affiliate Disclosure |  Privacy Policy

Copyright ยฉ 2024 CodersTechZone.com