How to Remove Duplicate Values from a JavaScript Array?

There are several ways to remove duplicate elements from JavaScript array. It is useful while working with data that have many repetitive values.

1. Using a Set

The simplest and most efficient ways to remove duplicates from an array in JavaScript is by using the Set object. A Set is a built-in data structure in JavaScript that only stores unique values. When we pass an array into a Set, any duplicate values are automatically removed.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The Set constructor takes the array arr and removes any duplicate values.
• The spread operator (...) is then used to convert the Set back into an array.

2. Using filter() and indexOf() Method

Another approach is to use the filter() method in combination with the indexOf() method. This method allows us to check if the current value of the array is appearing for the first time by comparing its index with the first occurrence.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The filter() method creates a new array containing only the elements that pass the test.
• The indexOf() method returns the first index at which a given element appears in the array.
• If the current element’s index is the same as the first occurrence of that element, it will be included in the new array.

3. Using reduce() and includes() Methods

We can also use the reduce() method in combination with the includes() method to remove duplicates. The reduce() method iterates through the array and constructs a new array by adding only unique values.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, value) => {
    if (!acc.includes(value)) acc.push(value);
        return acc;
}, []);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The reduce() method accumulates values into an array (acc).
• Before pushing each value into the accumulator, we check if the value already exists using the includes() method.
• This approach is a bit more verbose but works well for small to medium-sized arrays.

4. Using forEach() and a Temporary Object

You can also use a forEach() loop to iterate through the array and remove duplicates by keeping track of the values using a temporary object (or a Set). This method is efficient but can be slightly more complex to implement.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
const seen = {};

arr.forEach(value => {
    if (!seen[value]) {
        uniqueArr.push(value);
        seen[value] = true;
    }
});

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• We iterate through each element of the array using forEach().
• We maintain a seen object to keep track of the elements that have already been encountered.
• If an element is not in the seen object, it is added to the uniqueArr.

5. Using for Loop with indexOf() Method

If you prefer a more traditional approach or need to support older JavaScript versions, you can use a for loop and indexOf() to remove duplicates. This method works similarly to filter() but with more control over the iteration.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];

for (let i = 0; i < arr.length; i++) {
    if (uniqueArr.indexOf(arr[i]) === -1) {
        uniqueArr.push(arr[i]);
    }
}

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• We loop through each element of the array.
• If the element is not already in the uniqueArr (checked using indexOf()), we push it into the result array.