How to Remove Duplicate Elements From an Array in JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2023-06-17 10:14:57

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:

```javascript

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:

```javascript

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:

```javascript

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.