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

Data Array	position	indexOf	result
1	0	0	true
5	1	1	true
6	2	2	true
1	3	0	false
3	4	4	true
5	5	1	false
90	6	6	true
334	7	7	true

The above table is the tabular structure of filter method where on the basis of the condition it filters element. As you can see indexOf always return the position of the first occurrence of an element, so when duplicate element comes then indexOf not returns the position of a current element it returns the position of the first occurrence of element.

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

For full post click here