Remove duplicate items from arrays using reduce() method explained with examples

We have explained use cases of reduce() method in this and this article. Eventually there are lots of use cases like removing duplicate values from arrays. We will explain this case here with some examples.

Remove duplicate value use case

We have had a situation while we needed to filter our array to get only unique items out of it and remove duplicate values. Obviously there are lots of different methods to do that. Here we will focus on using reduce() method with almost similar implementations.

Importance of initial value

To be able to iterate through all array items and check if an item has a duplicate value we need to compare the current value and items already in accumulator. But we need an initial value as an empty array to be filled in by the result ( accumulator) as well. This is the approach from MDN:

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]

With length that is the accumulator’s array length, we check if that item’s value is equal to the current item or if we are just in the first item:

length === 0 || accumulator[length - 1] !== current

And if that was the case we push the item into the accumulator. But if not we just return accumulator itself and will not do anything.

At the end we will have a sorted array with unique values from the original array inside it. 

Using includes and concat

Also as with this method we can use includes method instead of length property to check the item’s equality and concat the unique values at the end. Using ternary syntax will make it really short:

const removeDuplicates = (theArray) => {
  return theArray.reduce((result,nextItem) => result.includes(nextItem) ? result : result.concat(nextItem),[]);

Here we check if the result which is the accumulator contains or includes the currentItem(calling it nextItem here just fo clarity). If it does we return the accumulator and if it does not include it, we concat that item to the result.

concat the items of array

Very neat and clean indeed. We could also use push method. But unlike concat it changes the original arrays as push adds items to the array and concat just merge them. In our case it is the same result though if we use each one.

We could have return the method in one line not using explicit “return. We need to remove brackets and remove the return keyword:

const removeDuplicates = (theArray) => 
  theArray.reduce((result,nextItem) => result.includes(nextItem) ? result : result.concat(nextItem),[]);

Whichever approach we could use reduce in a reliable and easy way to remove duplicate items from an array. We could also use filter and set methods in a different ways to complete the task but that is for another article.

Thank you for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.