Remove Duplicates from Flat Array with array.reduce in JavaScript

Share this video with your friends

Social Share Links

Send Tweet

In this lesson you will learn how to remove duplicates from the flat array which is a common coding challenge for beginner JavaScript interviews.

We will learn how to write a duplicate removal function using functional programming approach with reduce array method. You will see how we can remove duplicates by checking whether the accumulator in reduce already contains a value that is trying to be added to the resulting array.

Instructor: [00:00] Final method of removing the item from an array is to use reduce function. Let's see how the function looks like. Const reduceFunc, again accepts an array. We want to perform reduce method in this array. We want to grab the accumulator and value, and we want to check if accumulator includes the value which we're trying to check for the application.

[00:48] If it already includes it, then we just return accumulator. If not, then we clone the accumulator and add the value to it. We want to use the empty array as the initial value. Let's see if it works, and then go through the function, and explain how it works.

[01:16] You see that we have removed the duplicate value successfully. Now we can actually go through the reduce function and understand it. We get an array as an argument. Reduce function provides us with a couple of useful arguments from the callback accumulator and the value.

[01:38] Accumulator is initially something that is passed from the previous iteration. As we can provide it empty array as the initial accumulator, then we would have the accumulator as an empty array at the first iteration. At this apple, the accumulator includes value. We'll just check if empty array includes this apple.

[02:05] As we have the fall into this condition, because this is if it would include it. This condition applies if it would be true. In our case, it's false, so we are here. We spread the accumulator, which would be spreading the empty array, and then we add the value to this array. This would be our new accumulator.

[02:30] The second iteration is we have an array of apple and our value is pear. We check if an array which is only containing apple has pear. Of course, it doesn't. We again fall into this condition. We spread the accumulator into an array and add the pear to it. Same coming for the pineapple.

[02:55] In this case, it's actually different because when we're starting to check the accumulator, it already includes the values. accumulator.includes apple would yield us into the this condition, which is true. We want to just return the accumulator, so we perform no operation on the array itself. We don't do something like this, which returns to us the same array of apple, pear and pineapple.

[03:26] In the last case, we would again have accumulator includes pear. Again, we fall into this condition. We just return the accumulator, which technically yields us the array of apple, pear and pineapple with the remove duplicate values.