5 Ways to Remove Duplicate Object from Arrays in JavaScript

Arrays are important in web development, and JavaScript uses them a lot. But sometimes, we end up with duplicate objects in our arrays, which can cause problems and make our code less efficient. Luckily, JavaScript gives us many ways to deal with this issue.

In this guide, we'll look at 5 different ways to remove duplicate objects from arrays. This will help you write better code and make your development process smoother.

1. Using Set:

JavaScript Sets are like containers that only hold unique items, which makes them perfect for removing duplicates from arrays. With Sets, we can easily filter out duplicate objects. Here's a simple way to do it:

function removeDuplicates(arr) {
    return Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);
}

When we use JSON.stringify() on each object in the array, it converts them into string representations. Since each object will have a unique string representation, the Set will automatically remove any duplicates based on these string representations. This ensures that we end up with a set of unique objects in our array. 

2. Using Filter and Map:

Using the filter() and map() functions together is another effective way to remove duplicates based on a unique property of each object, such as an id. Here's how you can do it:

function removeDuplicates(arr) {
    const uniqueIds = new Set();
    return arr.filter(obj => {
        if (!uniqueIds.has(obj.id)) {
            uniqueIds.add(obj.id);
            return true;
        }
        return false;
    });
}

Maintaining a Set of unique identifiers allows us to efficiently filter out duplicate objects while preserving the order of the original array.

3. Using Reduce:

Using the reduce() method provides a powerful alternative for eliminating duplicate objects from arrays. Here's how you can use it:

function removeDuplicates(arr) {
    return arr.reduce((unique, obj) => {
        const isAlreadyExists = unique.some(item => JSON.stringify(item) === JSON.stringify(obj));
        if (!isAlreadyExists) {
            unique.push(obj);
        }
        return unique;
    }, []);
}

comparing string representations of objects is another efficient way to identify and exclude duplicates. 

4. Using forEach and Object:

Combining forEach() with an object allows us to track unique objects based on a specific property. For instance, if objects have a unique identifier id, we can use it to filter duplicates. Here's how you can do it:

function removeDuplicates(arr) {
    const uniqueObjects = {};
    const result = [];

    arr.forEach(obj => {
        if (!uniqueObjects[obj.id]) {
            uniqueObjects[obj.id] = true;
            result.push(obj);
        }
    });

    return result;
}

This approach takes advantage of the fact that object keys are unique, allowing us to easily track and filter out duplicates based on a specific property, such as an id. This results in a streamlined process for removing duplicates while maintaining performance.

5. Using ES6 Set with Custom Comparator:

When dealing with complex objects where the Set approach might not be sufficient, providing a custom comparator function can effectively address the issue. Here's how you can implement it:

function removeDuplicates(arr) {
    const seen = new Set();
    return arr.filter(obj => {
        const key = JSON.stringify(obj);
        return !seen.has(key) && seen.add(key);
    });
}

By using JSON.stringify() to create unique string representations of objects, we can effectively eliminate duplicates while maintaining compatibility with Sets.