How to Remove Duplicate Elements From an Array in JavaScript

In this article, we will explore how to remove duplicate elements from an array in JavaScript using different methods. Here are the commonly used methods:

• Using the reduce() method

• Using the filter() method

• Using the Set object

Let’s get started.

Using the reduce() method

Here is an example of a JavaScript code that uses the reduce() method to remove duplicate elements from an array:

const itemsArr = ["a", "b", "c", "b", "a", "c", "d", "e", "d", "e"];
const removeDuplicateItems = itemsArr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    return [...accumulator, currentValue];
  }
  return accumulator;
}, []); // 

console.log(removeDuplicateItems); // ["a", "b", "c", "d", "e"];

Code Explanation

We declare a constant variable itemsArr and assign it to an array of several items with duplicates. We declare another constant variable called removeDuplicateItems and assign it to the result of applying the reduce() method on the itemsArr.

The reduce() method is called on itemArr and it iterates over each element of the array. The reduce() method takes two arguments; the callback function and the initial value for the accumulator. The callback function passed into the reduce() method also takes two parameters; accumulator and currentValue. The accumulator is the value that is returned and accumulated after each iteration, and currentValue is the current element of the array being processed in each iteration of the reduce method.

In the callback function, we use the if statement and includes() method to check if the current value is present in the accumulator array. If the condition !accumulator.includes(currentValue) is true, the current value is not included in the accumulator array, but if this condition is false, the current value is included in the accumulator array.

We then return a new array created by spreading the elements of the accumulator (...accumulator) and appending the current value (currentValue). We output the resulting array with duplicate items removed to the console.

Using the filter() method

Here is an example of a JavaScript code that uses the filter() method to remove duplicate elements from an array:

const numberArray = [1, 2, 3, 3, 4, 4, 5, 5, 5, 6];
const removeDuplicateNumbers = numberArray.filter((value, index) => {
  return numberArray.indexOf(value) === index;
});
console.log(removeDuplicateNumbers); // [1, 2, 3, 4, 5, 6]

Code explanation

Firstly, we declare a constant variable numberArray and assigns it an array containing several numbers with duplicates. We declare another constant variable called removeDuplicateNumbers and assign it to the result of applying the filter() method on the itemsArr.

The filter() method creates a new array by iterating over each element of the numberArray and applies a callback function to it, takes two parameters: value and index.

In the callback function, the indexOf() method is used to check the first occurrence of the value in the numberArray. If the index of the current element (numberArray.indexOf(value)) is equal to the index passed to the callback function (index), it means that this is the first occurrence of the element, so this element is stored in the filtered array.

So, by comparing the index of each element with the first occurrence of that element in the array, we keep only the first occurrence of each element and remove duplicates.

We log the result of removeDuplicateNumbers to the console which contains a new array without the duplicate items.

Using the Set object

Here is an example of a JavaScript code that uses the Set object to remove duplicate elements from an array:

const newArray = ["a", "b", "c", "b", "a", "c", "d", "e", "d", "e"];
const removeDuplicateArr = [...new Set(newArray)];

console.log(removeDuplicateArr); // ["a", "b", "c", "d", "e"];

Code explanation

We declare a constant variable newArray and assigns it an array of items with duplicates. We declare another constant variable called removeDuplicateArr and assign it to the result of applying the new Set object on the newArray.

The Set object only allows unique values, so any duplicates in the original array are removed. Then, we use the spread operator (...) to convert the Set object back into an array.

We log the result of removeDuplicateArr to the console which contains only the unique elements from the original newArray without any duplicates.