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 the forEach method. Check whether the uniqueAnimals object contains that value. If not it will be added with the key as item and value as a true. Finally, you can get keys to the object using the 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);
}
    

Use filter function in JS

Filter method will return a new array with the element which is passed the test condition within it. The first parameter of the filter method is a callback function. In there you can access 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 Object in JS

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

    
const animals = ['🐞','🐌','🐳','🐏','πŸ™','πŸ™','🐌'];

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

Using Reduce function in JS

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

The first parameter of reduce function is a callback function. It 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 the initial value as a second parameter and in this case, you can set an empty array. If the initial value is not specified it takes the 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