How to Remove Duplicates From an Array in JavaScript [Examples]

Being able to remove duplicates from (or de-duplicate) an array is a useful thing to be able to do. Here’s how it’s done.

What is an Array?

In programming, an array is a type of variable that can hold other values, or references to other variables, in a list at a certain position.

Arrays are vital to building any application – allowing you to store a list of variables or values of any length in a single variable – ready to be iterated over, processed, or displayed.

For example, an array could contain a list of attendees to an event that can be managed by adding or removing records, or one might contain a list of objectives to be shown on-screen in a video game – ready to be removed from the array as they are completed.

Arrays form the backbone of pretty much every program you might write in PHP or any other programming language.

You can check if a variable is an array in Javascript using the Array.inArray() method.

Using Javascript’s set to Remove Array Duplicates

A set is a type of variable which stores a list or collection of values – all of which must be unique.

So, by creating a set from a given array and then converting back to an array, only the unique values are retained – effectively de-duplicating the array.

This is the best way of removing duplicates from an array – it’s one short line of code that is unobtrusive and clear in purpose. Here it is:

var arrayWithDuplicates = [1, 2, 1 ,3 ,4];
var arrayWithoutDuplicates = [...new Set(arrayWithDuplicates)];

Above, an array named arrayWithDuplicates is defined. A second array is then defined, arrayWithoutDuplicates, which will contain a de-duplicated copy of arrayWithDuplicates.

How does this work? In the second line, an array is created (the outermost set of square brackets), which contains the values from a new Set constructed using the values from the array that contains duplicates. The new set reads the original array and creates a set with only the unique values from it, and then an array is created from that set.

For more on sets and the set class, check out the Mozilla developer docs here.

Using  filter to De-Duplicate

The set class is a relatively recent addition to JavaScript and is widely supported – however; there are other ways of removing duplicate values from an array.

The array class in JavaScript also has the filter method. The filter method checks every value in the array against a condition and removes it if that condition fails. Thus, it can be easily used to check each value in an array and remove it if it already exists elsewhere in the array:

var arrayWithDuplicates = [1, 2, 1 ,3 ,4];
var arrayWithoutDuplicates = arrayWithDuplicates.filter(function(item, index, self) {
    return self.indexOf(item) == index;
});

Above, the filter method is called on arrayWithDuplicates. The function which filters the values in the array will return TRUE only if the index of the current item is equal to the current iteration – i.e., if a value with the same value as the current item being checked is found and it does not have the same index, it will be removed.

It’s less efficient than using a set but is a valid method of removing duplicates.