Remove Duplicates From An Array In Javascript

Often, when working with some API calls or UI logic, you get a response back in the form of a giant array, with lots of repeated or duplicate data.

How can you clean this data to remove duplicate values from the array?

There are many different approaches, and here's two I like for their simplicity and elegance.

Approach 1 Using array.filter

Here, you maintain a 'seen' array of values that have been encountered, and only push to result array the values that haven't been seen before, using array.filter.

const removeDuplicates = (arr) => {
  let seen = [];
  return arr.filter((item) => {
    // is this item original
    if (seen.indexOf(item) === -1) {
      // yes it is, push it to seen
      seen.push(item);
      // keep it in result array
      return item;
    } // duplicate item is filtered from result array
  });
};

Usage:

const arr = [1,2,2,3,3,4,5,6,7,7,7,8,9,10,'a','a','b','a', 'b', 'c'];
const res = removeDuplicates(arr);
// res is: [1,2,3,4,5,6,7,8,9,10,'a','b','c']

Approach 2 Using ES6 Set

Here, you create a new Set from the existing array, and then destructure it to convert it back to an array. This desctructured array is the one without duplicates and you can assign it to your variable/result.

This works because the Set data structure can only have unique values, and so calling the Set() constructor will create a new set with only unique values from the passed in array.

const noDupes = [...new Set(originalArray)];

Usage:

const arr = [1,2,2,3,3,4,5,6,7,7,7,8,9,10,'a','a','b','a', 'b', 'c'];
const res = [...new Set(arr)];
// res is: [1,2,3,4,5,6,7,8,9,10,'a','b','c']