How to Remove Duplicate from an Array in JavaScript?

There are various ways to Remove Duplicates from an Array. It is a common task used in many data cleaning algorithms.

How to Remove Duplicate from an Array in JavaScript?

Let us explore the best possible methods that are available to remove duplicate elements from an Array.

Method 1: Using forEach() Method and includes() method

1) forEach() Method – used to traverse the array. The forEach() method executes a provided function once for each array element.

Syntax – The Syntax of forEach() Method is

forEach(function(element, index, array) { /* ... */ }, thisArg)

forEach() Method Parameters

callbackFn – Function to execute on each element. The function is called with the following arguments:

• element – The current element being processed in the array.
• index – The index of element in the array.
• array – The array forEach() was called upon
• thisArg (optional) – Value to use as this when executing callbackFn.

2) includes() Method – It is used to check if an array includes a certain value among its entries, returning true or false as appropriate

Syntax: The Syntax of includes() Method is

includes(searchElement, fromIndex)

Parameters:  

• searchElement: The value to search for.
• fromIndex: The position to start from. Default value is 0.

Let us understand with a code snippet.

let charsArr = ['J', 'A', 'V, 'A'];

let uniqCharsArr = [];
charsArr.forEach((a) => {
    if (!uniqCharsArr.includes(a)) {
        uniqCharsArr.push(a);
    }
});

console.log(uniqCharsArr);

Output

['J','A','V']

In this method, we pass the array elements one at a time using the forEach() method. The includes() function returns true if the element is present,else returns false.

If the element is not present, it is added to a new array using the Array.push() method.

Method 2: Using Set Data Type

It is the simplest approach possible to filter duplicates from an Array. To understand this, let us go through the concept of set.

A Set object is a collection that stores unique values of any type, whether primitive values or object references.

We can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set’s collection.

Performance – The Set is faster than the Array.prototype.includes() method when an Array object has a length equal to a Set object’s size.

let charsArr = ['J', 'A', 'V', 'A'];
let uniqueCharsArr = [...new Set(charsArr)];

console.log(uniqueCharsArr);

Output

['J','A','V']

In this method, we pass an array with duplicate values as input to the Set constructor. The newly created ‘Set‘ will remove redundant elements. We can then, convert it back to an array.

Method 3: Using indexOf() and filter() method

This method creates a new array of elements that pass the provided requirement. 

It includes only those elements for which value is true. We remove identical values from the array by modifying the condition.

The indexOf() function returns the index of the foremost occurrence of an element in an Array.

For example:

let charsArr = ['J', 'A', 'V', 'A'];
charsArr.indexOf('A');
console.log(charsArr.indexOf('A'));

Output

1

Now, let us understand further.

let charsArr = ['J', 'A', 'V', 'A'];

charsArr.forEach((a, index) => {
    console.log(`${a} - ${index} - ${charsArr.indexOf(a)}`);
});

Output

J - 0 - 0
A - 1 - 1
V - 2 - 2
A - 3 - 1

The duplicate element is one whose index value is distinct from indexOf(). If you notice the above example the last element ‘A‘ has a index 3 and indexOf() value as 1. It means that the element ‘A‘ is already present at the index position 1 in the given array.

We will now remove the duplicates using the filter() method and retain those items whose indexes match the value of their indexOf().

Let us see with an example.

let charsArr = ['J', 'A', 'V', 'A']; 
let uniqueArr = charsArr.filter((a, index) => { 
return charsArr.indexOf(a) === index; 
}); 
console.log(uniqueArr);

Output

['J', 'A', 'V']

The duplicates are excluded in the above example as the index and indexOf() values are different.

Conclusion

To summarize, all the approaches mentioned above fit different scenarios where we can Remove Duplicates from an Array in JavaScript.

We prefer a Set data structure when we further need to perform operations compatible with ‘Set‘. It is more performant compared to other solutions.

On the other hand, forEach() and includes() method takes more memory processing and line of code than indexOf() and filter() methods. We need to choose the optimal solution based on the requirement.