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.
Top comments (0)