Get Difference between two Arrays of Objects in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 4, 2024
3 min

banner

# Get the Difference between two Arrays of Objects in JS

To get the difference between two arrays of objects:

  1. Use the filter() method to iterate over the first array.
  2. Check if each object is not contained in the second array.
  3. Repeat steps 1 and 2 for the second array.
  4. Concatenate the results to get the complete difference.
index.js
const arr1 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'bobby hadz'}, ]; const arr2 = [{id: 1, name: 'Tom'}]; function getDifference(array1, array2) { return array1.filter(object1 => { return !array2.some(object2 => { return object1.id === object2.id; }); }); } // ๐Ÿ‘‡๏ธ [ { id: 2, name: 'bobby hadz' } ] console.log(getDifference(arr1, arr2));

get difference between two arrays of objects

The code for this article is available on GitHub

The function we passed to the Array.filter() method gets called with each element (object) in the array.

On each iteration, we use the Array.some() method on the second array.

The function we passed to the some() method also gets invoked with each element (object) in the array.

The some() method tests whether at least one element in the array passes a condition.

We check if at least 1 object from the first array has the same id property as an object from the second array.

We used the logical NOT (!) operator to negate the result from the some() method because we only care about objects that don't have the same id property between the arrays.

If the condition is met, the some() method returns true and the object gets included in the array that the filter() method returns.

# Get the complete difference between two Arrays of Objects

However, we only called the filter method on one of the arrays. So what happens if the first array contains fewer elements than the second?

index.js
const arr1 = [{id: 1, name: 'Tom'}]; // ๐Ÿ“Œ now the second array has 2 elements const arr2 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'bobby hadz'}, ]; function getDifference(array1, array2) { return array1.filter(object1 => { return !array2.some(object2 => { return object1.id === object2.id; }); }); } // ๐Ÿ‘‡๏ธ [] console.log(getDifference(arr1, arr2));

get complete difference between two arrays of objects

The code for this article is available on GitHub

The only thing we changed is we switched the values of the arr1 and arr2 variables.

Now we call the filter() method on the first array.

However, the only object contained in the array is also contained in the second array, so the getDifference() function returns an empty array.

We would expect the return value to be [{id: 2, name: 'bobby hadz'}].

We need to call the getDifference() function two times and combine the results to get the complete difference.

index.js
const arr1 = [{id: 1, name: 'Tom'}]; const arr2 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'bobby hadz'}, ]; function getDifference(array1, array2) { return array1.filter(object1 => { return !array2.some(object2 => { return object1.id === object2.id; }); }); } const difference = [ ...getDifference(arr1, arr2), ...getDifference(arr2, arr1) ]; // ๐Ÿ‘‡๏ธ [{id: 2, name: 'bobby hadz'}] console.log(difference);

calling getdifference function two times

The code for this article is available on GitHub

To get the complete difference between two arrays of objects:

  1. Call the filter method on the first array and return only the objects that are not contained in the second array.
  2. Call the filter method on the second array and return only the objects that are not contained in the first array.
  3. Combine the two arrays into a third array using the spread syntax (...).

An easy way to think about the spread syntax (...) is that we are unpacking the values of one array into another array.

Now our example returns the complete difference between the two arrays of objects.

You can also shorten the getDifference function by using arrow functions with implicit returns.

index.js
const arr1 = [{id: 1, name: 'Tom'}]; const arr2 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'bobby hadz'}, ]; function getDifference(array1, array2) { return array1.filter( object1 => !array2.some( object2 => object1.id === object2.id ), ); } const difference = [ ...getDifference(arr1, arr2), ...getDifference(arr2, arr1) ]; // ๐Ÿ‘‡๏ธ [{id: 2, name: 'bobby hadz'}] console.log(difference);
The code for this article is available on GitHub

We removed the curly braces and explicit return statements from the getDifference function to make it a little more concise.

I've also written an article on how to get the difference between two arrays in JS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev