5 Ways to Remove Array Duplicates in Javascript

Different ways to remove duplicates in Array

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;
    });
}
ItemIndexIndexOftrue/false
🐞00true
🐌11true
πŸ™22true
πŸ™32false
🐌41false

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];
    },[])

}
IterationAccumulator(1st param)Current Valuereturn
1[]🐞[🐞]
2[🐞]🐌[🐞,🐌]
3[🐞,🐌]πŸ™[🐞,🐌,πŸ™]
4[🐞,🐌,πŸ™]πŸ™[🐞,🐌,πŸ™]
5[🐞,🐌,πŸ™]🐌[🐞,🐌,πŸ™]

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124