How to Solve the Common JavaScript Problem: Finding Unique Objects in Two Arrays

If you’ve ever faced the problem of finding unique objects across two arrays in JavaScript, you’re not alone. Many developers, especially when working with dynamic data, often need to combine two arrays while ensuring that only unique objects remain. Sounds simple, but there are some challenges along the way!

In this post, we’ll tackle a common Stack Overflow question: How do I find unique objects when merging two arrays? You’ll learn a straightforward way to solve this problem, and gain insights into comparing objects in JavaScript. You can find code snippets on Github.

The Problem: Duplicate Objects in Arrays

Let’s start with a simple problem. You have two arrays of objects, and some of the objects are identical. You need to merge both arrays but remove any duplicate objects based on their key-value pairs.

Example:

We have the following two arrays:

const old_workflow = [
  { a: 1, b: 2 },
  { a: 3, b: 4 }
];

const new_workflow = [
  { a: 1, b: 2 },
  { a: 3, b: 5 }
];

The goal is to combine these arrays into one, but only include unique objects. So, the result should be:

const unique_workflow = [
  { a: 1, b: 2 },  // this object is identical in both arrays, so it appears only once
  { a: 3, b: 4 },  // unique to the old_workflow array
  { a: 3, b: 5 }   // unique to the new_workflow array
];

The Challenge: JavaScript’s Approach to Objects

When comparing objects in JavaScript, we run into a tricky situation. Objects are reference types, so two objects with identical properties and values are considered different unless they refer to the same reference in memory.

Why new Set() Won’t Work

You might think of using JavaScript’s Set() to automatically remove duplicates. However, Set doesn’t compare objects based on their values — it compares by reference. This means that even if two objects have the same key-value pairs, they are considered distinct in a Set.

let combined = old_workflow.concat(new_workflow);
let uniqueArray = [...new Set(combined)];  // Doesn't work as expected

This approach fails because Set() does not compare the contents of the objects, just their references.

The Solution: Deep Comparison Using JSON.stringify()

Step-by-Step Solution

To solve this problem, we’ll merge the two arrays and then compare each object in the merged array. The key here is to serialize each object into a string format using JSON.stringify(). This allows us to compare objects based on their actual values and not just their references.

Step 1: Merge the Arrays

Start by combining both arrays into one. We’ll use the spread operator for a clean and efficient merge:

const merged_workflow = [...old_workflow, ...new_workflow];

Step 2: Define Object Equality

Now, define a function that will compare two objects based on their key-value pairs. We’ll use JSON.stringify() for this, which converts objects into a string representation:

const isObjEqual = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);

Step 3: Filter Unique Objects

We now need to filter out duplicates. We can loop through the merged array and only push objects that don’t already exist in the unique_workflow array:

const unique_workflow = [];
merged_workflow.forEach(item => {
  if (!unique_workflow.some(existingItem => isObjEqual(existingItem, item))) {
    unique_workflow.push(item);
  }
});

Final Code Example

Putting it all together, here’s the complete solution:

const old_workflow = [{ a: 1, b: 2 }, { a: 3, b: 4 }];
const new_workflow = [{ a: 1, b: 2 }, { a: 3, b: 5 }];

// Step 1: Merge the arrays
const merged_workflow = [...old_workflow, ...new_workflow];

// Step 2: Define object equality
const isObjEqual = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);

// Step 3: Filter unique objects
const unique_workflow = [];
merged_workflow.forEach(item => {
  if (!unique_workflow.some(existingItem => isObjEqual(existingItem, item))) {
    unique_workflow.push(item);
  }
});

console.log(unique_workflow);
// Output: [{ a: 1, b: 2 }, { a: 3, b: 4 }, { a: 3, b: 5 }]

You can now test the code by running the following command in your terminal the project directory:

node index.js

Why This Works

• JSON.stringify(): Serializing the objects to strings allows us to directly compare their values.
• some(): We use .some() to check if an object already exists in the unique_workflow array based on deep equality.
• Efficient Filtering: We only push objects that are unique, ensuring no duplicates.

Best Practices for Solving Array and Object Problems in JavaScript

1. Understand Object Comparison Limitations

JavaScript doesn’t allow direct comparison of objects by their properties. Use JSON.stringify() for a quick solution, but be mindful of performance for large objects or deep comparisons.

2. Use Array Methods Efficiently

Methods like .some(), .forEach(), and .filter() can be combined for clean and readable code. However, when dealing with large datasets, performance may become a concern, so always test with various data sizes.

3. Optimize for Performance in Large Datasets

If you’re working with a large dataset and performance is critical, consider using a more efficient deep comparison method that avoids the overhead of JSON.stringify(). You could implement your own deep equality function for faster comparisons in certain cases.

Conclusion

Solving the problem of finding unique objects in two arrays is a common challenge JavaScript developers face, especially when dealing with dynamic data. By using a combination of object serialization and array methods like .some(), we can efficiently filter out duplicates based on object content rather than references.

With this solution, you can confidently merge arrays of objects and remove duplicates, ensuring you only retain the unique values based on their key-value pairs.

If you found this solution helpful, follow me && check out more of my JavaScript problem-solving guides and Stack Overflow solutions here.