How to Remove Array Duplicates in ES6

Samantha Ming
Jan 14, 2019 · 4 min read
Image for post
Image for post
Code Tidbit by SamanthaMing.com

Here are three ways to filter out duplicates from an array and return only the unique values. My favorite is using Set cause it’s the shortest and simplest 😁

Image for post
Image for post
Image for post
Image for post

1. Using Set

Let me start first by explaining what Set is:

Okay, let’s go back to our code and break down what’s happening. There are 2 things going on:

  1. First, we are creating a new Setby passing an array. Because Setonly allows unique values, all duplicates will be removed.
  2. Now the duplicates are gone, we’re going to convert it back to an array by using the spread operator ...
Image for post
Image for post

Convert Set to an Array using Array.from

Alternatively, you can also use Array.from to convert a Set into an array:

Image for post
Image for post
Image for post
Image for post

2: Using filter

In order to understand this option, let’s go through what these two methods are doing: indexOf and filter.

indexOf

The indexOf method returns the first index it finds of the provided element from our array.

Image for post
Image for post

filter

The filter() method creates a new array of elements that pass the conditional we provide. In other words, if the element passes and returns true, it will be included in the filtered array. And any element that fails or return false, it will be NOT be in the filtered array.

Let’s step in and walk through what happens as we loop through the array.

Image for post
Image for post

Below is the output from the console.log showed above. The duplicates are where the index doesn’t match the indexOf. So in those cases, the condition will be false and won’t be included in our filtered array.

Image for post
Image for post

Retrieve the duplicate values

We can also use the filter method to retrieve the duplicate values from the array. We can do this by simply adjusting our condition like so:

Image for post
Image for post

Again, if we step through the code above and see the output:

Image for post
Image for post
Image for post
Image for post

3: Using reduce

The reduce method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.

In this case, our reducer function is checking if our final array contains the item. If it doesn’t, push that item into our final array. Otherwise, skip that element and return just our final array as is (essentially skipping over that element).

Reduce is always a bit more tricky to understand, so let’s also step into each case and see the output:

Image for post
Image for post

And here’s the output from the console.log:

Image for post
Image for post
Image for post
Image for post

Community Input


DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store