Best 5 ways to remove the duplicate object from array In javascript| typescript

The examples below take an array of objects or primitive types as input, delete duplicate items from the array, and return the new array without duplicates.

If an array contains primitive types, it is simple to filter out Duplicates. If an array contains objects, we must filter duplicates using key and value pair check validation.

Removing duplicates is a developer’s daily task in application development.

Let us declare an array object for all the removing duplicate objects in an array.

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

There are multiple ways we can remove duplicates from an array.

The following ways we can remove duplicates.

Remove Duplicates from an array of primitives by the Filter method in typescript

It is very easy to remove duplicates from a simple array of primitive values like strings, and Numbers. This example works for primitive types - strings, numbers, and a Boolean

• Declared an array of numbers with duplicate values
• Iterate each element in an array using the filter method
• the filter has a callback method that accepts elements and indexOf
• Check each element’s position in an array using the indexOf method
• if indexOf returns a valid index position, return an array without Duplicates

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter(
  (element, i) => i === simpleArray.indexOf(element),
);
console.log(simpleArray); //[ 1, 4, 5 ]

ES6 Set with spread operator to delete duplicate data from an array

Set is a new data structure introduced in ES6, the latest javascript language. It does not accept duplicates.

The example uses below features of the ES6 language

• Set tutorials
• Spread Operator

let numberStrings = ["one", "two", "one", "two"];
let myset = [...new Set(numberStrings)];
console.log(myset);

The below example explains about following things

• The declared array of strings with duplicates for these examples
• Created set object using new operator and constructor accepts array values
• using the spread operator set result values return an array and are copied to a new array
• Finally, returned the new array without duplicates

How to avoid duplicate arrays using Lodash Uniq methods

lodash uniq and uniqBy method returns an array by removing duplicate object courseArray

The uniq method iterates each element and calls the callback for each element. Provided the object properties logic to check duplicate objects

The resulting array is of the same order as the input courseArray

var result = _.uniq(courseArray, function (item) {
  return item.id && item.name;
});

ES5 array duplicates using reduce and some methods with example

The array reduce method is one of the methods for reducing the array of elements It has a callback called for each item during the iteration

The callback accepts the accumulator and the current values. accumulator is a temporary array that will be updated the value based on each element. object equality is checked with properties value and logic as follows

var filterArray = courseArray.reduce((accumulator, current) => {
  if (
    !accumalator.some(
      (item) => item.id === current.id && item.name === current.name,
    )
  ) {
    accumalator.push(current);
  }
  return accumulator;
}, []);
console.log(filterArray);

And the output:

[
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
];

Underscore uniq methods

If your application is dependent on the underscore library, this method is simple for removing duplicate elements from an array.

The uniq method accepts an input array and a callback. The callback accepts an object that checks for unique logic. The code below checks if each element and its values are the same as another object.

var resultarray = _.uniq(courseArray function (element) {
    return element.id && element.name;
});

Conclusion

In this tutorial, You learned multiple ways to remove duplicate elements from an array in javascript and typescript

• Es6 Set with the spread operator
• ES5 Array reduce and some methods
• ES5 Array filter method
• Lodash and Underscore library Uniq method

To Sum up, Out of all these things, Set performs better compared with other approaches.

Following is a Rank order in terms of performance from best to worst

Set -> uniq -> reduce -> filter.