Remove duplicate from array of objects based on value of properties in JavaScript

ONLINECAST

3 min read

·

05-10-2024

9

0

Share

Removing Duplicate Objects in JavaScript: A Comprehensive Guide

Working with arrays of objects in JavaScript often requires handling duplicate entries. This can be especially challenging when you need to remove duplicates based on specific properties of the objects. In this article, we'll explore different methods for efficiently removing duplicate objects from an array, focusing on filtering by specific property values.

The Scenario: Duplicate Objects and Property-Based Filtering

Imagine you have an array of products, each with a name and price property. You want to ensure that no two products in your array share the same name. This is a common scenario, and efficiently removing duplicates based on the name property is crucial.

Here's an example of the array we'll work with:

const products = [
    { name: 'Apple', price: 1.00 },
    { name: 'Banana', price: 0.50 },
    { name: 'Apple', price: 1.25 }, 
    { name: 'Orange', price: 0.75 },
    { name: 'Banana', price: 0.60 },
];

Our goal is to remove the duplicate "Apple" and "Banana" entries, leaving only one instance of each product name in the array.

Methods for Removing Duplicate Objects

Here are a few popular methods for removing duplicate objects, tailored to filtering by specific properties:

1. Using Set and Object Destructuring

This approach leverages JavaScript's Set data structure, which automatically removes duplicates. We'll destructure the objects to create unique keys based on the desired property:

const uniqueProducts = [...new Set(products.map(product => ({...product, price: null})))];

Here's how it works:

• products.map(product => ({...product, price: null})): We create a new array by mapping over the original products array. Each object is copied, but we set the price property to null to ignore it during comparison. This ensures uniqueness is determined by the name property only.
• new Set(...): We create a Set from the mapped array. The Set automatically removes duplicates based on object equality.
• [... ]: We use the spread syntax to convert the Set back into an array.

This method is efficient and concise, but it requires modifying the original objects by setting the price to null. If this modification is undesirable, alternative approaches are necessary.

2. Using reduce and Object Indexing

This method utilizes the reduce function to create a new array with unique objects. We'll store seen objects in a temporary object using the specific property as the key.

const uniqueProducts = products.reduce((acc, product) => {
    if (!acc[product.name]) {
        acc[product.name] = product;
        acc.result.push(product);
    }
    return acc;
}, { result: [] }).result;

Let's break down the code:

• products.reduce((acc, product) => {...}, { result: []}): We reduce the original array, initializing an accumulator object acc with an empty result array to store unique products.
• if (!acc[product.name]): We check if the current product.name exists as a key in the acc object. If it doesn't, the product is unique.
• acc[product.name] = product;: If the product is unique, we store it in the acc object using its name as the key.
• acc.result.push(product);: We add the unique product to the result array in the accumulator.
• .result: Finally, we access the result array from the reduced accumulator, which contains the unique products.

This method maintains the original objects and is suitable for larger datasets, as it avoids redundant comparisons.

3. Using a Custom Filter Function

You can create your own filter function to achieve the desired result. This provides more flexibility and control over the filtering logic:

function filterDuplicates(products, prop) {
    const seen = new Set();
    return products.filter(product => {
        if (seen.has(product[prop])) return false;
        seen.add(product[prop]);
        return true;
    });
}

const uniqueProducts = filterDuplicates(products, 'name'); 

This function:

• seen = new Set(): Initializes a Set to store unique property values.
• products.filter(product => {...}): Filters the array based on the provided prop value.
• if (seen.has(product[prop])) return false;: If the property value has already been seen, the object is considered a duplicate.
• seen.add(product[prop]);: Adds the unique property value to the seen set.
• return true;: If the property value is unique, the object is kept in the filtered array.

This approach offers the flexibility of filtering by any property and customizing the logic within the filter function.

Choosing the Right Method

The best method for removing duplicate objects depends on your specific needs and the size of your data.

• For small datasets, the Set and object destructuring method is concise and efficient.
• For larger datasets or when maintaining the original objects is crucial, the reduce approach is generally preferred.
• The custom filter function offers the most flexibility and control but can be less efficient for large datasets.

Conclusion

Removing duplicate objects from an array based on specific properties is a common task in JavaScript development. By understanding the various methods and their strengths and weaknesses, you can choose the most suitable approach for your specific scenario.