How to Remove Duplicates From an Array in JavaScript

Introduction

When consuming APIs or retrieving data from an array, you may encounter data that repeats itself, but you only want to select the unique values.

For example, assume you have an array representing a restaurant menu, as shown below. You might need to retrieve available categories from that array - in that case, you would need to filter through the array to get the categories only once, avoiding duplicates:

const menu = [
    {
        name: "buttermilk pancakes",
        category: "breakfast"
    },
    {
        name: "diner double",
        category: "lunch"
    },
    {
        name: "godzilla milkshake",
        category: "dinner"
    },
    {
        name: "country delight",
        category: "breakfast"
    },
    {
        name: "egg attack",
        category: "lunch"
    }
];

In this article, we will learn how to remove duplicates from an array in JavaScript, essentially creating an array of unique values. We'll be taking a look at several different methods so you'll be able to select the one that fits the best with your project.

The Best Solution: Use the Set() Constructor

A Set is a collection of items which are unique, meaning, no element can be repeated. Suppose we have an array of school subjects, and we want to remove all duplicates from it:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

JavaScript provides us with a handy constructor for creating sets - Set(). It can accept an array as its argument. In that case, it creates a set and fills it with unique values from the passed array. The problem with this approach is that a Set() constructor creates a set, not an array (which we need).

We'll bypass the undesired behavior by using the spread operator - also known as the three dots operator (...). When combined with a set (produced with a Set() constructor), the spread operator can spread the set values into an array:

let uniqueSubjects = [...new Set(subjects)];

console.log(uniqueSubjects); // ["mathematics", "french", "english"]

We can also do this for an array of objects, let’s illustrate that on the example of the menu array:

let categories = [...new Set( menu.map((menu) => menu.category))];

console.log(categories); // ["breakfast","lunch","dinner"]

Note: Removing duplicates from an array using the Set() constructor takes linear time - O(n) (n is the number of elements in the original array). All the other methods of removing duplicates take O(n²) time. Therefore, we highly advise you to use the Set() constructor in any case possible.

Using the filter() And indexOf() Methods

The filter() method is used to loop through an array and return a new array consisting only of elements that met the given criteria, whereas the indexOf() method is used to return the index of the element's first occurrence in the array.

For example, suppose we have an array of subjects, and we want to check the index of each element:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let subjectsIndex = [];
subjects.map((subject) => {
    subjectsIndex.push(subjects.indexOf(subject));
});

console.log(subjectsIndex); // [0,1,2,1,0]

Because we know that the filter method returns a new array based on the given criteria, we can now use it to include only the elements whose indexes match their indexOf() values:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.filter((subject, index) => {
    return subjects.indexOf(subject) === index;
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

Suppose we want to make use of the menu array, we would first have to loop through the array to store the categories in a new array, then now make use of the filter() and indexOf() method:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.filter((category, index) => {
    return categoriesArray.indexOf(category) === index;
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

If you'd like to read more about the filter() method - read our Guide to JavaScript's filter() Method!

Using reduce() and includes() Methods

Reduce is always a little more difficult to grasp but performs a very powerful reduction operation, borrowed from functional programming. The reduce() method is used to reduce the array's elements and combine them into a final array based on some reduction function that you pass in, whereas the includes() method returns true if an element is in an array and false otherwise.

The following example iterates over the elements of an array and checks if a particular element is in the result, else we add it:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = subjects.reduce((result, subject) => {
    return result.includes(subject) ? result : [...result, subject];
}, []);

console.log(uniqueSubjects); // ["mathematics","french","english"]

Suppose we want to make use of the menu array, we would first have to loop through the array to store the categories in an array, then now make use of the reduce() and includes() method as earlier explained:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = categoriesArray.reduce((result, category) => {
    return result.includes(category) ? result : [...result, category];
}, []);

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

Note: Note how we've also used the spread operator in this section.

Using the forEach() and includes() Methods

This works almost like using the filter() and includes() methods. We are simply using the forEach() method to iterate through the array and then add to a new array only elements that are not already there:

let subjects = ["mathematics", "french", "english", "french", "mathematics"];

let uniqueSubjects = [];
subjects.forEach((subject) => {
    if (!uniqueSubjects.includes(subject)) {
        uniqueSubjects.push(subject);
    }
});

console.log(uniqueSubjects); // ["mathematics","french","english"]

Suppose we want to make use of the menu array, we would first have to loop through the array to store the categories in an array, then now make use of the forEach() and includes() method as earlier explained:

let categoriesArray = menu.map((menu)=>menu.category)

let uniqueCategories = [];
categoriesArray.forEach((category) => {
    if (!uniqueCategories.includes(category)) {
        uniqueCategories.push(category);
    }
});

console.log(uniqueCategories); // ["breakfast","lunch","dinner"]

Conclusion

We've seen four different methods for removing duplicates from an array in this article. The introduction of Set() in ES6 made this a lot easier and more efficient. Removing duplicates from an array using the Set() constructor takes linear time - O(n) (n is the number of elements in the original array). All the other methods of removing duplicates take O(n²) time. Therefore, we highly advise you to use the Set() constructor in any case possible.