Ten ways of remove duplicate objects from an array in typescript/javascript


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

if an array contains primitive types, it is very easy to filter Duplicates if an array contains objects, We need to filter the duplicates based on key and value pair equal validation.

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

Let us declare an object array for all the removing duplicate object 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.

Filter primitive types from an array

It is very easy removing duplicates from a simple array of primitive values like string, Numbers This example works for primitive types -  strings, numbers and boolean

  • Declared an array of numbers with duplicate values
  • Iterate each element in an array using the filter method
  • the filter has callback method accepts element and indexOf
  • Check each element position in an array  using the indexOf method
  • if indexOf returns valid index position, return 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

Set is a new data struture introduced in ES6, latest javascript language. It does not accepts duplicates.

The below example uses below features of ES6 language

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 spread operator, set result values return an array and copied to a new array
  • Finally returned the new array without duplicates

using Lodash Uniq methods

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

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

The result array is of same order of the input courseArray

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

using array reduce with some method

Array reduce method is  one of an important method for reducing the array elements This has a callback  called for each element during iteration Checks

the callback accepts the acculator 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((accumalator, current) => {
    if(!accumalator.some(item => item.id === current.id && item.name === current.name)) {
      accumalator.push(current);
    }
    return accumalator;
},[]);
console.log(filterArray)

And the out put is

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

Underscore uniq methods

If your application has a dependency on the underscore library, This approach is very easy to filter duplicate elements from an array.

uniq method accepts input array and callback the callback accepts an object which will be checked unique logic here, The below code checks for if each element and its values are the same with another object.

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