Get Difference between two Arrays of Objects in JavaScript

avatar

Borislav Hadzhiev

Tue Dec 07 20213 min read

Get Difference between two Arrays of Objects #

To get the difference between two arrays of objects:

  1. Use the filter() method to iterate over the first array and check if each object is not contained in the second array.
  2. Repeat step 1 for the second array.
  3. Concatenate the results to get the complete difference between the arrays of objects.
index.js
const arr1 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'John'}, ]; 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: 'John'}] console.log(getDifference(arr1, arr2));

The function we pass 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 pass 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 sameid property as an object from the second array.

We use 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 the filter method returns.

However, we only called the filter method on one of the arrays, so what would happen in the first array contains less elements than the second?
index.js
const arr1 = [{id: 1, name: 'Tom'}]; // ๐Ÿ“Œ now second array has 2 elements const arr2 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'John'}, ]; function getDifference(array1, array2) { return array1.filter(object1 => { return !array2.some(object2 => { return object1.id === object2.id; }); }); } // ๐Ÿ‘‡๏ธ [] console.log(getDifference(arr1, arr2));

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

Now we call the filter method on the first array, however the only object it contains is also contained in the second array, so the getDifference method returns an empty object.

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

To solve this problem, we need to call the getDifference method two times and combine the results.
index.js
const arr1 = [{id: 1, name: 'Tom'}]; const arr2 = [ {id: 1, name: 'Tom'}, {id: 2, name: 'John'}, ]; 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: 'John'}] console.log(difference);

Here's what we did to get this working:

  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. We combined the results from the two arrays into a third array, using the spread operator (...) syntax.

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

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

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee