6 Ways to remove duplicate from JS ES6 array

JavaScript

In this article, we are going to explore 6 Ways to remove duplicate from JS ES6 array and array of objects with code examples.

1. SET to Remove duplicate from JS Array

The JS ES6 SET is a unique collection that contains unique values. It does not allow duplicate. So by passing the duplicate array to the Set constructor will remove the duplicate values from the array.

Steps to remove duplicate from JS Array

  • Convert JavaScript array to Set, the set contains only unique values so all the duplicates values will be removed from the array.
  • Convert Set back to an array using spread operator[. . .].

JS Program to remove duplicate from array

let arr_animals= ['cat', 'cat', 'dog', 'dog', 'cat',12,13,14];
let unique_array = [...new Set(arr_animals)];

console.log(unique_array);

Output will be array after removing duplicate elements

[ 'cat', 'dog', 12, 13, 14 ]

2. Remove duplicate from array ignorance case

If we use the above example to remove duplicate array elements that are case sensitive then all duplicate elements will not remove.

To cover all elements of an array, we have to ignore case(case intensive) either by converting all elements to lower case or upper case.

  • toLocaleString() :convert array into string separated by comma(,).
  • toLowerCase() :convert string to lower case.
  • split():Convert lower case string to array.
  • Convert JavaScript array to Set, the set contains only unique values so all the duplicates values will be removed from the array.
  • Convert Set back to an array using spread operator[. . .].

Let us understand with example:

let arr_animals = ['Cat', 'cat', 'dog', 'Dog', 'cat',12,13,14];

//for case-insensitive check coverting all array element to lowercase
var array_tolower = arr_animals.toLocaleString().toLowerCase().split(',')

let unique_array = [...new Set(array_tolower)];

console.log(unique_array);

Output

[ 'cat', 'dog', '12', '13', '14' ]

3. Remove duplicate from an array using include()

The include() methods return true if element exists in Array otherwise returns false.

In the below example, we will use the include() method with foreach() to get a unique array element from an array. loop over all array elements and add into a new array that is not already in a new array.

let arr_animals = ['cat', 'cat', 'dog', 'dog', 'cat',12,13,14];




let unique_array = [];
arr_animals.forEach((item) => {
    if (!unique_array.includes(item)) {
        unique_array.push(item);
    }
});

console.log(unique_array);

Output

[ 'cat', 'dog', 12, 13, 14 ]

4. Remove duplicate value from an array indexof() and filter()

indexof(): It returns the index of the first occurrence of an element in an array. The duplicate element can be identified this way which index is different from indexof() is all duplicate elements. 

let arr_animals = ['cat', 'cat', 'dog', 'dog', 'cat'];


arr_animals.forEach((item, index) => {
    console.log(`${item} - ${index}  - ${arr_animals.indexOf(item)}`);
});

Output

cat - 0  - 0
cat - 1  - 0
dog - 2  - 2
dog - 3  - 2
cat - 4  - 0

So to remove the duplicate we will use the filter() method to filter only elements whose indexes match their indexOf() values.

let arr_animals = ['cat', 'cat', 'dog', 'dog', 'cat'];


unique_array = arr_animals .filter((item, index) => {
    return arr_animals.indexOf(item)===index ;
});

console.log(unique_array)

Output

[ 'cat', 'dog' ]

5. Reduce() to remove duplicate from an array

The reduce() method is used to reduce the elements of the array and accumulate them into result array based on the reducer function passed.

#program to remove duplicate from an array in JS using reduce() 

let arr_animals = ['cat', 'cat', 'dog', 'dog', 'cat'];



result_array= arr_animals.reduce((unique_array, item) => {
  

  return unique_array.includes(item) ? unique_array : [...unique_array, item];
}, []);


console.log(result_array)

Output

[ 'cat', 'dog' ]

6. Remove object duplicate from an array

In this code example, we are removing duplicates from an array of objects using Map.

#program to remove duplicate from an array of objects in JS

var subjects = [ {Sub :'Phys', marks:100,stuname :'Rack'},
{Sub :'Phys', marks:100,stuname :'Rack'},
{Sub :'chem', marks:100,stuname :'rick'},
{Sub :'chem', marks:100,stuname :'rick'}];


function removeduplicate(value,key)
{
  return [...new Map(value.map(x=>[key(x),x])).values()]
}


console.log(JSON.stringify(removeduplicate(subjects,sb=>sb.Sub)))

Output

[{"Sub":"Phys","marks":100,"stuname":"Rack"},{"Sub":"chem","marks":100,"stuname":"rick"}]

Summary :

In this post, we have explored 6 Ways to remove duplicate from JS ES6 array Using Set collection that contain only unique elements, includes() with foreach loop, filter()with indexof(), reduce() methods. Remove duplicate element from an array using by ignorance case. Remove duplicates from the array of objects.

Related Posts