Removing Duplicates from an Array of Objects

Removing duplicates from an array of objects is a common task in programming. In this tutorial, we will explore different methods to achieve this.

Understanding the Problem

When dealing with arrays of objects, duplicates can arise when two or more objects have the same properties and values. For example, consider an array of objects representing people, where each object has properties like name, age, and city. If two objects have the same name, age, and city, they are considered duplicates.

Method 1: Using Filter and FindIndex

One way to remove duplicates from an array of objects is by using the filter method in combination with findIndex. The idea is to iterate through the array and check if each object is the first occurrence of its kind. If it is, we keep it; otherwise, we discard it.

Here’s an example implementation:

const arr = [
  { place: "here", name: "stuff" },
  { place: "there", name: "morestuff" },
  { place: "there", name: "morestuff" }
];

const uniqueArr = arr.filter((value, index, self) =>
  index === self.findIndex((t) => (
    t.place === value.place && t.name === value.name
  ))
);

console.log(uniqueArr);

This code uses the filter method to create a new array with only the first occurrence of each duplicate object. The findIndex method is used to find the index of the first object that matches the current object’s properties.

Method 2: Using Map

Another approach is to use a Map to keep track of unique objects. We can create a Map where the key is a string representation of the object’s properties, and the value is the object itself. Since Map keys must be unique, this automatically removes duplicates.

Here’s an example implementation:

const arr = [
  { place: "here", name: "stuff" },
  { place: "there", name: "morestuff" },
  { place: "there", name: "morestuff" }
];

const uniqueArr = [...new Map(arr.map(item => [JSON.stringify(item), item])).values()];

console.log(uniqueArr);

This code uses the map method to create an array of arrays, where each inner array contains a string representation of the object’s properties as the key and the object itself as the value. We then pass this array to the Map constructor and use the values method to get an array of unique objects.

Method 3: Using Filter with Includes

A third approach is to use the filter method in combination with includes. The idea is to iterate through the array and check if each object’s properties are already included in the resulting array. If they are, we discard it; otherwise, we keep it.

Here’s an example implementation:

const arr = [
  { place: "here", name: "stuff" },
  { place: "there", name: "morestuff" },
  { place: "there", name: "morestuff" }
];

const ids = arr.map(({ place, name }) => `${place}-${name}`);
const filtered = arr.filter((item, index) => !ids.includes(`${item.place}-${item.name}`, index + 1));

console.log(filtered);

This code uses the map method to create an array of strings representing each object’s properties. We then use the filter method to create a new array with only the first occurrence of each duplicate object.

Conclusion

Removing duplicates from an array of objects can be achieved using different methods, including filter and findIndex, Map, or filter with includes. Each method has its own strengths and weaknesses, and the choice of which one to use depends on the specific requirements of your project. By understanding these methods, you can write more efficient and effective code.