How To Remove Duplicates In Array Using Javascript ES6

In javascript programming there are number of ways to remove duplicates from array, But which is best and short it’s hard to decide

Let’s discuss how to remove duplicates from array of primitives(like array of string, array of numbers) and array of non-primitives(like array of objects)

Using IndexOf Method

const dataArr = ['1','5','6','1','3','5','90','334'];

const resultArr = dataArr.filter((data,index)=>{
  return dataArr.indexOf(data) === index;
})
console.log(resultArr); //["1", "5", "6", "3", "90", "334"]

As we know, That filter method is used for filtering method from the array as per the given condition

dataArr.indexOf(data) === index , indexOf method always return first occurance

Using Set

Set is an Object introduced in ES6, Used for storing collection of unique values

const dataArr = ['1','5','6','1','3','5','90','334','90'];

//creates  Set object from array of unique element
const dataArrWithSet = new Set(dataArr);


//we can create Set object to array also using spread operator
const resultArr = [...dataArrWithSet];

console.log(resultArr); 

Above method is my favorite, which require minimum line of code

Using Reduce

reduce is a method of Array prototype which have reducer function which executes on each element and results in a single output value

const dataArr = ['1','5','6','1','3','5','90','334','90'];


const resultArr = dataArr.reduce((acc,item)=>{
      if(!acc.includes(item)){
        acc.push(item);
      }
    return acc;
},[])

console.log(resultArr);//["1", "5", "6", "3", "90", "334"]

In the above eg. acc is an accumulator which is initialized with an empty array and whatever reducer function returning result stored into the accumulator. But, before storing elements into the accumulator we are checking that element is already present or not, If the element not present in the accumulator then we are pushing elements into the accumulator. So, there are no chances of pushing duplicate elements into an accumulator. So at the final result, we will get a collection of unique elements

Using ForEach Method

forEach is a method of Array prototype which used to iterate over elements of the array

const dataArr = ['1','5','6','1','3','5','90','334','90'];

const uniqueArr = [];
dataArr.forEach((item)=>{
    //pushes only unique element
      if(!uniqueArr.includes(item)){
        uniqueArr.push(item);
      }
   
})

console.log(uniqueArr); //["1", "5", "6", "3", "90", "334"]

In the above eg. In uniqueArr we only pushing item when the item is not already there.So, at last, we will get a collection of unique elements

Removing Duplicates From Array Of Objects

As of now we saw how to remove duplicates from array of primitives but all the above techniques not necessarily helps for non primitive type because here equality checks on reference not on value.

Using Map

Map object introduced in ES6, Which is used to store key value pair of data and also remembers insertion order

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 ]
var dataArr = arrOfObj.map(item=>{
    return [item.name,item]
}); // creates array of array
var maparr = new Map(dataArr); // create key value pair from array of array

var result = [...maparr.values()];//converting back to array from mapobject

console.log(result); //[{"name":"abc","age":27},{"name":"pqr","age":27}]

In above example, If we are giving array of array as an input to Map object then Map object converts it into key value pair and if it finds duplicate key it just replace it, so at final we get Arry with unique collection of values

The above example will not work in every case. We have taken the name as our unique value for the map. But as we know the name can be the same in some cases and age can be same in some cases

for eg.

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 {
    name:'abc',age:28
  },
 ]

For eg. consider above array, then our solution with name uniqueness will not work because in one case age is different and it will get override with other with which have the same name

so, what is the solution for this.

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 {
    name:'abc',age:28
  },
 ]
var dataArr = arrOfObj.map(item=>{
    return [JSON.stringify(item),item]
}); // creates array of array
var maparr = new Map(dataArr); // create key value pair from array of array

var result = [...maparr.values()];//converting back to array from mapobject

console.log(result); //[{"name":"abc","age":27},{"name":"pqr","age":27}]

As you can see we have stringify whole object and make it as key. So, with above solution will get 100% unique collection of array.

Using Set

we can remove duplicates from array using Set object also

var arrOfObj = [
  {
    id:1 ,name:'abc',age:27
  },
  {
    id:2 ,name:'pqr',age:27
  },
  {
    id:1 ,name:'abc',age:27
  },
 ]

var setObj = new Set(); // create key value pair from array of array

var result = arrOfObj.reduce((acc,item)=>{
  if(!setObj.has(item.id)){
    setObj.add(item.id,item)
    acc.push(item)
  }
  return acc;
},[]);//converting back to array from mapobject

console.log(result); //[{"id":1,"name":"abc","age":27},{"id":2,"name":"pqr","age":27}]

As you can see above with the help of reduce and Set we able to find duplicate from an array

Conclusion:

There are number of ways to find out duplicates from an array But, It’s always best task to find which is best solution fit for your problem

via techBoxWeb