Skip to main content

How to Get the Difference Between Two Arrays of Objects in JavaScript

Finding the "difference" between two arrays of objects is a common data comparison task. Unlike with primitive values, you can't use array.includes() because objects are compared by reference. Instead, you must compare them based on a unique property, like an id.

This guide will teach you a robust and reusable method for finding the symmetric difference between two arrays of objects. This means we will find all objects that exist in one array but not the other, based on a specific key.

The Core Problem: Defining the "Difference"​

When we talk about the "difference" between two arrays of objects, A and B, we usually mean the symmetric difference: all elements that are in A but not in B, plus all elements that are in B but not in A.

To do this, we need a way to identify if an object from one array "exists" in the other, which we'll do by comparing a unique property like id.

// Problem: Find the objects that are unique to each array based on their 'id'.
const arrayA = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const arrayB = [
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'David' },
];

// Desired Output: [{ id: 1, ... }, { id: 2, ... }, { id: 4, ... }]

The Solution: A Reusable getDifference Function​

The most effective way to solve this is to create a helper function that finds the elements in one array that are not present in another.

We will use the filter() and some() methods.

  • .filter() will iterate through the first array (array1).
  • For each object in array1, .some() will check if any object in array2 has a matching id.
  • We will keep only the objects from array1 where some() returns false.

Solution: this function finds elements in array1 that are NOT in array2.

function getDifference(array1, array2) {
  // Filter array1 to keep only objects whose ID is not found in array2
  return array1.filter(obj1 => {
    // Check if there is NO object in array2 with the same ID
    return !array2.some(obj2 => obj1.id === obj2.id);
  });
}

How the getDifference Function Works​

Let's break down the logic with our example arrays. When we call getDifference(arrayA, arrayB):

  1. .filter() starts on arrayA.
  2. First element: obj1 is { id: 1, name: 'Alice' }.
    • .some() runs on arrayB. Does any object in arrayB have an id of 1? No.
    • some() returns false.
    • !some() becomes true. The filter keeps Alice's object.
  3. Third element: obj1 is { id: 3, name: 'Charlie' }.
    • .some() runs on arrayB. Does any object in arrayB have an id of 3? Yes.
    • some() returns true.
    • !some() becomes false. The filter discards Charlie's object.

The final result of getDifference(arrayA, arrayB) is [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }].

Putting it Together: Finding the Symmetric Difference​

To get the full symmetric difference, we need to run our helper function in both directions and combine the results.

const arrayA = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const arrayB = [
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'David' },
];

// Helper function from the previous section
function getDifference(array1, array2) {
  // Filter array1 to keep only objects whose ID is not found in array2
  return array1.filter(obj1 => {
    // Check if there is NO object in array2 with the same ID
    return !array2.some(obj2 => obj1.id === obj2.id);
  });
}

// 1. Find elements in A that are not in B
const uniqueInA = getDifference(arrayA, arrayB);
// -> [{ id: 1, ... }, { id: 2, ... }]

// 2. Find elements in B that are not in A
const uniqueInB = getDifference(arrayB, arrayA);
// -> [{ id: 4, ... }]

// 3. Combine the results
const symmetricDifference = [...uniqueInA, ...uniqueInB];

console.log(symmetricDifference);

Output:

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 4, name: 'David' }
]
note

This is a robust and readable pattern that correctly identifies all unique objects from both arrays.

Conclusion​

Finding the difference between two arrays of objects requires a custom comparison based on a unique property.

  • The recommended best practice is to use a combination of the .filter() and .some() methods to identify which objects are unique to each array.
  • To find the symmetric difference, you must perform this check in both directions (A -> B and B -> A) and then merge the results.
  • Encapsulating the core logic in a reusable helper function makes your code cleaner and more maintainable.

Table of Contents