How to remove Array duplicates in Javascript

Using plain old for loop

To implement this method you need another array and you can loop each element in the original array, then check whether the element contains in the second array. If not that element will be added to the second array

    
const animals = ['🐞','🐌','🐳','🐏','🐙','🐙','🐌'];

var removeDuplicateUsingTwoArrays = function(){
    let uniqueAnimals = [];
    for(var i = 0 ; i < animals.length ; i++){
        if(!uniqueAnimals.includes(animals[i])){
            uniqueAnimals.push(animals[i])
        }
    }
    return uniqueAnimals;
}
    

Using For Each

In this method you can loop the array using forEach method. Then we check whether the uniqueAnimals object contain that value. If not it will be add with the key as item and value as a true. Finally you can get keys of the object using keys method. In our case keys will be the unique element and it will return the all unique elements. You can also use uniqueAnimals as an array and check like the first method

    
const animals = ['🐞','🐌','🐳','🐏','🐙','🐙','🐌'];

var removeDuplicateUsingForEach = function(){
    let uniqueAnimals = {};
    animals.forEach(function(i){
        if(!uniqueAnimals[i]){
            uniqueAnimals[i] = true;
        }
    })
   return Object.keys(uniqueAnimals);
}
    

Using filter method

Filter method will return a new array with the element which is pass the test condition within it. First parameter of the filter method is a callback function. In there you can access the each element and the index of the element.  

As an example when this function call in the first-time item will be 🐞 and index is 0. In next execution item will be 🐌 and index 1. For each execution, we check whether the index of the current element is equal to the element index in the original array. If not that method will return false and the element will not be available in a final result.

You have to remember the indexOf method return the index which is a match in first. Therefore if there is a duplicate element it will return the first matching index and it will not equal to the current index

    
const animals = ['🐞','🐌','🐙','🐙','🐌'];

var removeDuplicateUsingFilter = function(){
    return uniqueAnimals = animals.filter(function(item,index){
        return animals.indexOf(item) == index;
    });
}
    
Item Index IndexOf true/false
🐞
0
0
true
🐌
1
1
true
🐙
2
2
true
🐙
3
2
false
🐌
4
1
false

Using Set

The set object will allow storing unique values of any types. Therefore when we add values to set it will remove all the duplicate values. new using spread operator you can convert values again to an array.

    
const animals = ['🐞','🐌','🐳','🐏','🐙','🐙','🐌'];

var removeDuplicateUsingSet = function(){
    return uniqueAnimals = [...new Set(animals)];
}
    

Using Reduce method

Using reduce methods is kind of hard hard to understand most of the cases. Reduce will execute the reducer function to each element and provide you a single output.

The first parameter is a callback function and accepts the first parameter which is an accumulator (Kind of fancy word for last value) and the second parameter which represent current value. Inside the function, you need to check whether the accumulator contains the current checking value. If yes, it will set as an accumulator, otherwise, we need to spread the values in the accumulator (in our case it’s an array) and add current value to the array.

Reduce take initial value as a second parameter and in this case you can set empty array. If initial value is not specified it takes first element in the array

    
const animals = ['🐞','🐌','🐙','🐙','🐌'];

var removeDuplicateUsingReduce = function(){
    return animals.reduce((uniqueAnimals,currentValue) => {
        return uniqueAnimals.includes(currentValue) ? uniqueAnimals : [...uniqueAnimals,currentValue];
    },[])

}
    
Iteration Accumulator(1st param) Current Value return
1
[]
🐞
[🐞]
2
[🐞]
🐌
[🐞,🐌]
3
[🐞,🐌]
🐙
[🐞,🐌,🐙]
4
[🐞,🐌,🐙]
🐙
[🐞,🐌,🐙]
5
[🐞,🐌,🐙]
🐌
[🐞,🐌,🐙]
You Will Like Also
x