Remove array duplicates by property - JavaScript

When working with arrays of objects in JavaScript, you often need to remove duplicate entries based on a specific property. This tutorial shows different methods to accomplish this task.

The Problem

Consider an array of objects with duplicate names:

const arr = [
    {name: "Jack", age: "14"},
    {name: "bob", age: "14"},
    {name: "sue", age: "21"},
    {name: "Jill", age: "16"},
    {name: "Jack", age: "21"}
];

console.log("Original array:");
console.log(arr);

Original array:
[
  { name: 'Jack', age: '14' },
  { name: 'bob', age: '14' },
  { name: 'sue', age: '21' },
  { name: 'Jill', age: '16' },
  { name: 'Jack', age: '21' }
]

We need to remove objects with duplicate names, keeping only the first occurrence of each unique name.

Method 1: Using filter() with indexOf()

const arr = [
    {name: "Jack", age: "14"},
    {name: "bob", age: "14"},
    {name: "sue", age: "21"},
    {name: "Jill", age: "16"},
    {name: "Jack", age: "21"}
];

const removeDuplicates = (array, property) => {
    return array.filter((obj, index) => 
        array.findIndex(item => item[property] === obj[property]) === index
    );
};

const uniqueArray = removeDuplicates(arr, 'name');
console.log(uniqueArray);

[
  { name: 'Jack', age: '14' },
  { name: 'bob', age: '14' },
  { name: 'sue', age: '21' },
  { name: 'Jill', age: '16' }
]

Method 2: Using Map for Better Performance

const arr = [
    {name: "Jack", age: "14"},
    {name: "bob", age: "14"},
    {name: "sue", age: "21"},
    {name: "Jill", age: "16"},
    {name: "Jack", age: "21"}
];

const removeDuplicatesWithMap = (array, property) => {
    const seen = new Map();
    return array.filter(obj => {
        if (seen.has(obj[property])) {
            return false;
        }
        seen.set(obj[property], true);
        return true;
    });
};

const uniqueArray = removeDuplicatesWithMap(arr, 'name');
console.log(uniqueArray);

[
  { name: 'Jack', age: '14' },
  { name: 'bob', age: '14' },
  { name: 'sue', age: '21' },
  { name: 'Jill', age: '16' }
]

Method 3: Mutating Original Array

const arr = [
    {name: "Jack", age: "14"},
    {name: "bob", age: "14"},
    {name: "sue", age: "21"},
    {name: "Jill", age: "16"},
    {name: "Jack", age: "21"}
];

const removeDuplicateInPlace = (array, property) => {
    const appeared = {};
    for (let i = 0; i 

[
  { name: 'Jack', age: '14' },
  { name: 'bob', age: '14' },
  { name: 'sue', age: '21' },
  { name: 'Jill', age: '16' }
]


Comparison

Conclusion

For best performance and readability, use the Map-based approach. It maintains O(n) complexity while preserving the original array and providing clean, functional code.