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

The examples below demonstrate removing duplicate items from an array, whether it comprises objects or primitive types. The new array returned will contain no duplicates.

If an array consists of primitive types, eliminating duplicates is straightforward. However, if it contains objects, duplicate filtering requires a key-value pair validation check.

Removing duplicates is a common task for developers in application development.

Let’s declare an array object to showcase the removal of duplicate objects within an array:

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

There are multiple ways to remove duplicates from an array.

#Remove Duplicates from an array of primitives in typescript

The following ways we can remove duplicates.

• Using Filter method in typescript

  It’s effortless to remove duplicates from a simple array of primitive values like strings, numbers, and Booleans. This example works for primitive types such as strings, numbers, and Booleans.

  • Declare an array of numbers with duplicate values.
  • Iterate through each element in the array using the filter method.
  • The filter method includes a callback that accepts elements and indexOf.
  • Check each element’s position in the 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 ]

• Using ES6 Set with spread operator

  Set is a new data structure introduced in ES6, the latest version of JavaScript. It does not accept duplicates.

  This example utilizes the following features of the ES6 language.

  • Set tutorials
  • Spread Operator

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

  The following example explains the following

  • The declared array of strings with duplicates for these examples.
  • Creation of a set object using the new operator, with the constructor accepting array values.
  • Using the spread operator to set result values, returning an array and copying it to a new array
  • Finally, returning the new array without duplicates.

• Using Lodash Uniq methods

  Lodash’s uniq and uniqBy methods return an array by removing duplicate objects from courseArray.

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

  The resulting array maintains the same order as the input courseArray.

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

• Using ES5 reduce and some methods

  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. The accumulator is a temporary array that will be updated based on each element. Object equality is checked with property values and logic as follows:

  var filterArray = courseArray.reduce((accumulator, current) => {
    if (
      !accumulator.some(
        (item) => item.id === current.id && item.name === current.name,
      )
    ) {
      accumulator.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 depends on the `underscore` library, this method is straightforward 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.



  ```javascript
  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

In summary, out of all these methods, Set performs the best in terms of performance.

Here’s the rank order in terms of performance, from best to worst:

Set -> uniq -> reduce -> filter.