Remove duplicates from array Javascript

In this post, you will learn how to remove duplicates from an array in Javascript.

Sometimes in the development process, we may face a situation where we need to filter arrays to remove duplicates. There are lots of ways to remove the duplicate values from an array in Javascript. Here, we have mentioned most of them -

Using a set() function

A Set is a collection of unique values. Each value may occur only once in a Set. It can hold any values of any data type. To remove duplicates from an array, first we need to convert an array to a set. The new Set will implicitly eliminate duplicate values. Then, convert the set back to an array.

let chars = ['apple', 'banana', 'apple', 'orange', 'kiwi', 'orange'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);

Output of the above code:

["apple", "banana", "orange", "kiwi"]

Using indexOf() and filter() methods

The indexOf() method returns the index of the first occurrence of a value in an array. The index value is different from the indexOf value of the duplicate items. Hence, we can easily judge the duplicates value -

let chars = ['apple', 'banana', 'apple', 'orange', 'kiwi', 'orange'];

chars.forEach((c, index) => {
    console.log('${c} - ${index} - ${chars.indexOf(c)}');
});

Output of the above code:

apple - 0 - 0
banana - 1 - 1
apple - 2 - 0
orange - 3 - 3
kiwi - 4 - 4
orange - 5 - 3

Next, we have used the filter() method to remove duplicate values. It includes only elements whose indexes match their indexOf values.

let chars = ['apple', 'banana', 'apple', 'orange', 'kiwi', 'orange'];

let uniqueChars = chars.filter((c, index) => {
    return chars.indexOf(c) === index;
});

console.log(uniqueChars);

Output of the above code:

["apple", "banana", "orange", "kiwi"]

Using forEach() and include()

In the given example, we have used the foreach() and include() method to eliminate the duplicates from an array. The includes() method returns true if a string contains a specified string, otherwise it returns false. Here, we iterate over the given array elements and add to a new array only those elements that are not already there.

let chars = ['potato', 'tomato', 'potato', 'onion', 'chilli', 'raddish'];

let uniqueChars = [];
chars.forEach((c) => {
    if (!uniqueChars.includes(c)) {
        uniqueChars.push(c);
    }
});

console.log(uniqueChars);

Output of the above code:

["potato", "tomato", "onion", "chilli", "raddish"]

How to reverse string in Javascript
JavaScript display PDF in the browser using Ajax call
Parsing JSON in Javascript
Javascript speech recognition example
Select/deselect all checkboxes using Javascript
Print specific part of a web page in javascript
Dynamically Add/Delete HTML Table Rows Using Javascript
jQuery Ajax serialize form data example
Image popup on page load using HTML and jQuery
Ajax live data search using jQuery PHP MySQL
jQuery loop over JSON result after AJAX Success
Simple star rating system using PHP, jQuery and Ajax
jquery image zoom on mouseover example
Bootstrap star rating input example
Bootstrap datepicker example
Submit a form data without page refresh