How to Remove Duplicates from an Array of Objects in JavaScript?

How to Remove Duplicates from an Array of Objects in JavaScript?

Last Updated : 19 Nov, 2024

Here are some effective methods to remove duplicates from an array of objects in JavaScript

1. Using filter() and findIndex() Methods - Most Used

The simplest way to remove duplicates is by using filter() and findIndex(). This method keeps the first occurrence of each object with a unique property (like id) and filters out duplicates.

JavaScript

const a = [
    { a: '1', b: '2' },
    { c: '2', d: '4' },
    { c: '2', d: '4' },
    { a: '1', b: '2' }
];

const uniqueArray = a.filter((o, index, arr) =>
    arr.findIndex(item => JSON.stringify(item) === JSON.stringify(o)) === index
);

console.log(uniqueArray);

Output

[
    { a: '1', b: '2' },
    { c: '2', d: '4' }
]

2. Using Set and JSON.stringify() Method for Complete Duplicates

If you want to remove duplicates where all properties match, you can use Set and JSON.stringify() to convert objects to unique strings. This approach is useful for objects that need to be treated as identical only if every property is the same.

JavaScript

const a = [
    { a: '1', b: '2' },
    { c: '2', d: '4' },
    { c: '2', d: '4' },
    { a: '1', b: '2' }
];

const uniqueArray = Array.from(new Set(a.map(o => JSON.stringify(o)))).map(str => JSON.parse(str));

console.log(uniqueArray);

Output

[
    { a: '1', b: '2' },
    { c: '2', d: '4' }
]

3. Using filter() and includes() Methods with Unique Key Extraction

Another approach is to use filter() and includes() by tracking unique keys, such as id, in an array. This method adds objects to the result only if their key hasn’t been added yet.

JavaScript

const a = [
    { a: '1', b: '2' },
    { c: '2', d: '4' },
    { c: '2', d: '4' },
    { a: '1', b: '2' }
];

const uniqueStrings = [];
const uniqueArray = a.filter(o => {
    const s = JSON.stringify(o);
    if (!uniqueStrings.includes(s)) {
        uniqueStrings.push(s);
        return true;
    }
    return false;
});

console.log(uniqueArray);

Output

[
    { a: '1', b: '2' },
    { c: '2', d: '4' }
]

4. Using Lodash’s _.uniqBy() Method

If you using Lodash, the _.uniqBy() function simplifies removing duplicates. You can specify a unique property, like id, to keep only one instance of each object based on that key.

JavaScript

const _ = require('lodash');

const a = [
    { a: '1', b: '2' },
    { c: '2', d: '4' },
    { c: '2', d: '4' },
    { a: '1', b: '2' }
];

const uniqueArray = _.uniqWith(a, _.isEqual);

console.log(uniqueArray);

Output

[
    { a: '1', b: '2' },
    { c: '2', d: '4' }
]

Importance of Removing Duplicates from an Array of Objects

Removing duplicates is essential for

Data Consistency: Ensuring accurate representation without repeated items.
Performance Optimization: Reducing unnecessary data for faster processing.
Data Presentation: Presenting unique items to avoid redundancy in user interfaces.

removing-duplicates — Remove Duplicates from an Array of Objects in JavaScript

How to Remove Duplicates from an Array of Objects in JavaScript?

sayantanm19

Improve

Article Tags :

Similar Reads

How to Add Elements to a JavaScript Array?

Here are different ways to add elements to an array in JavaScript.1. Using push() MethodThe push() method adds one or more elements to the end of an array and returns the new length of the array.Syntaxarray.push( element1, element2, . . ., elementN );JavaScriptconst arr = [10, 20, 30, 40]; arr.push(

Create an Array of Given Size in JavaScript

The basic method to create an array is by using the Array constructor. We can initialize an array of certain length just by passing a single integer argument to the JavaScript array constructor. This will create an array of the given size with undefined values.Syntaxconst arr = new Array( length );J

Insert at the Beginning of an Array in JavaScript

Following are different ways to add new elements at the beginning of an array1. Using the Array unshift() Method - Most Used:Adding new elements at the beginning of the existing array can be done by using the Array unshift() method. This method is similar to the push() method but it adds an element

Remove Elements From a JavaScript Array

Here are the various methods to remove elements from a JavaScript ArrayRemove elements from Array1. Using pop() methodThe pop() method removes and returns the last element of an array. This function decreases the length of the array by 1 every time the element is removed.javascriptlet a = ["Apple",

Remove Duplicate Elements from JavaScript Array

To Remove the elements from an array we can use the JavaScript set method. Removing duplicate elements requires checking if the element is present more than one time in the array. 1. Using JavaScript Set() - Mostly UsedThe JavaScript Set() method creates an object containing only unique values. To r

How to Remove Multiple Elements from Array in JavaScript?

Here are various methods to remove multiple elements from an array in JavaScript1. Using filter() MethodThe filter() method creates a new array with the elements that pass the condition. This method does not change the original array.JavaScriptlet a = [1, 2, 3, 4, 5]; let remove = [2, 4]; a = a.filt

Insert at the Beginning of an Array in JavaScript

Following are different ways to add new elements at the beginning of an array1. Using the Array unshift() Method - Most Used:Adding new elements at the beginning of the existing array can be done by using the Array unshift() method. This method is similar to the push() method but it adds an element

Reverse an Array in JavaScript

Here are the different methods to reverse an array in JavaScript1. Using the reverse() MethodJavaScript provides a built-in array method called reverse() that reverses the elements of the array in place. This method mutates the original array and returns the reversed array.JavaScriptlet a = [1, 2, 3

JavaScript - Delete last Occurrence from JS Array

These are the following ways to remove the last Item from the given array: 1. Using pop() Method (Simple and Easiest Method for Any Array) The pop() method is used to get the last element of the given array it can also be used to remove the last element from the given array. JavaScriptlet a = [34, 2

Remove Empty Elements from an Array in JavaScript

Here are different approaches to remove empty elements from an Array in JavaScript.1. Using array.filter() MethodThe array filter() method is used to create a new array from a given array consisting of elements that satisfy given conditions.array.filter( callback( element, index, arr ), thisValue )J