How to Remove Duplicates from an Array of Objects in JavaScript?
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.
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.
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.
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.
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.
Remove Duplicates from an Array of Objects in JavaScript
