The best way to remove duplicates from an array of objects in JavaScript?

When working with arrays of objects in JavaScript, removing duplicates requires checking specific properties rather than comparing entire objects. Here are the most effective approaches.

Sample Data

Let's use this array of student objects with duplicate IDs:

var studentDetails = [
    {studentId: 101},
    {studentId: 104},
    {studentId: 106},
    {studentId: 104},
    {studentId: 110},
    {studentId: 106}
];
console.log("Original array:", studentDetails);

Original array: [
    { studentId: 101 },
    { studentId: 104 },
    { studentId: 106 },
    { studentId: 104 },
    { studentId: 110 },
    { studentId: 106 }
]

Using Set and for...of Loop

This approach uses a Set to track seen values and builds a new array without duplicates:

var studentDetails = [
    {studentId: 101},
    {studentId: 104},
    {studentId: 106},
    {studentId: 104},
    {studentId: 110},
    {studentId: 106}
];

const distinctValues = new Set();
const withoutDuplicate = [];

for (const tempObj of studentDetails) {
    if (!distinctValues.has(tempObj.studentId)) {
        distinctValues.add(tempObj.studentId);
        withoutDuplicate.push(tempObj);
    }
}

console.log(withoutDuplicate);

[
    { studentId: 101 },
    { studentId: 104 },
    { studentId: 106 },
    { studentId: 110 }
]

Using filter() with indexOf

A more functional approach using array methods:

var studentDetails = [
    {studentId: 101},
    {studentId: 104},
    {studentId: 106},
    {studentId: 104},
    {studentId: 110},
    {studentId: 106}
];

const uniqueStudents = studentDetails.filter((student, index) => 
    studentDetails.findIndex(s => s.studentId === student.studentId) === index
);

console.log(uniqueStudents);

[
    { studentId: 101 },
    { studentId: 104 },
    { studentId: 106 },
    { studentId: 110 }
]

Using Map for Better Performance

For larger datasets, using Map provides better performance than repeated array searches:

var studentDetails = [
    {studentId: 101, name: "John"},
    {studentId: 104, name: "Alice"},
    {studentId: 106, name: "Bob"},
    {studentId: 104, name: "Alice"},
    {studentId: 110, name: "Charlie"}
];

const uniqueMap = new Map();
studentDetails.forEach(student => {
    if (!uniqueMap.has(student.studentId)) {
        uniqueMap.set(student.studentId, student);
    }
});

const uniqueStudents = Array.from(uniqueMap.values());
console.log(uniqueStudents);

[
    { studentId: 101, name: 'John' },
    { studentId: 104, name: 'Alice' },
    { studentId: 106, name: 'Bob' },
    { studentId: 110, name: 'Charlie' }
]

Comparison of Methods

Conclusion

For most cases, use the Set approach for its balance of performance and readability. For large datasets, Map provides the best performance, while filter() offers the most functional style.