Updated September 6, 2023
Introduction to Remove Duplicate Elements from Array JavaScript
Arrays are the fundamental data structure in programming, and it’s common to encounter situations where we need to remove duplicates from them. Duplicates can cause errors or lead to incorrect results, so knowing how to eliminate them effectively is essential. In this article, we’ll explore and learn the different methods for removing duplicates from arrays in JavaScript: using the filter() method, the Set() method, the forEach() method, Reduce() method, and Index () method. By the conclusion of this article, you’ll have a clear understanding of how each method works and be able to choose the best approach for your specific use case.
Table of Content
- Remove Duplicate Elements from an Array in JavaScript
- How to Remove Duplicate Elements from an Array in JavaScript
Definition
In JavaScript, the array is a collection of values, including strings, objects, numbers, and other data types. Sometimes, an array may contain duplicate values, which can be problematic when processing or analyzing the data. Therefore, it is often necessary to remove duplicate elements from an array.
Removing duplicate elements from an array means that each unique value in the array appears only once, and all other duplicates are removed. This can be accomplished using various methods in JavaScript, including the filter() method, the Set() object, the reduce() method, and the indexOf() method.
Removing duplicate elements from an array ensures that the data is consistent and accurate, which can be particularly useful when working with large data sets or performing complex calculations. It can also help improve your code’s performance, as processing unique elements is often faster than processing duplicates.
How to Remove Duplicate Elements from an Array in JavaScript?
To remove the duplicate elements in JavaScript, we can use multiple techniques. Below are the techniques used to remove the duplicate elements as follows. To remove duplicate elements below, we have used set, filter, reduce, for each, and IndexOf methods as follows.
1. Using filter() Method
The filter method creates new array elements that pass the condition we provided. It includes those elements that return a true value. We can remove the duplicate value from the array by adjusting the condition of an array. The below example shows the filter method as follows.
Code:
var ar = ["ABC", "PQR", "XYZ",
"MNL", "PQR", "ABC"];
function rd (ar) {
return ar.filter ((item,
index) => ar.indexOf (item) === index);
}
console.log (rd(ar));Output:
In the preceding example, we have created an array “ar” that contains duplicate elements. To remove the same, we have used the filter method on the array, and also we have passed the callback function. The callback function will take two arguments first is an index, and the second is an item. Finally, we have logged output into rd to see the output in the console; that array only contains unique elements.
2. Using Set() Method
In JavaScript, we can remove the duplicate elements using the set method. It is a built-in object that allows us to create a collection of unique values or elements. This method will set the new object type with the ES6, allowing us to create a collection of unique values. The below example shows the set method to remove duplicates from an array in JavaScript as follows.
Code:
var ar = ["ABC", "PQR", "XYZ",
"MNL", "PQR", "ABC"];
function rd (ar) {
return [...new Set(ar)];
}
console.log (rd(ar));Output:
In the above example mentioned, we have created the array “ar”. We created a new set object using the new set(ar) syntax and then spread back the same using the spread operator. It will create a new array with unique values. We have logged output into the “rd” array.
3. Using forEach() Method
Using the forEach method alone, we cannot remove duplicate elements from the array in JavaScript. The indexOf() method is utilized to determine the index of the Initial/ first occurrence of a specified element in an array, but it will not provide any mechanism to remove them. We can use the foreach method with the combination of the array method to remove the duplicates from the array. The below example shows the foreach method to remove a duplicate element in JavaScript as follows.
Code:
var ar = ["ABC", "PQR", "XYZ",
"MNL", "PQR", "ABC"];
function rd (ar) {
var un = [];
ar.forEach (ele => {
if (!un.includes (ele)) {
un.push (ele);
}
});
return un;
}
console.log (rd(ar));Output:
In the above example mentioned, we have iterated every element of the “ar” array by using the method of foreach. Inside the foreach method, we have used the push method to add the elements. After the completion of the loop, the “un” array will contain only unique elements.
<
4. Using Reduce() Method
We can use the reduce method to remove duplicate elements from the array in JavaScript. In a reduced method, the array elements are combined and reduced into the final array based on the reducer function we passed. The example below shows removing duplicate elements from the array using the reduce method in JavaScript as follows.
Code:
var ar = ["ABC", "PQR", "XYZ",
"MNL", "PQR", "ABC"];
function rd(ar) {
var un = ar.reduce(function (acc, curr) {
if (!acc.includes(curr))
acc.push(curr);
return acc;
}, []);
return un;
}
console.log(rd(ar));Output:
In the above example, we have declared an empty array as the initial value for an accumulator of the “acc” parameter using reduce method. We can iterate the same on every element by using an arr array. Inside the reduce method, we can use the indexOf method to check if the current element is already present in the accumulator array. If it is not present, we can add the same using the push method. After completion of the loop, the “un” array contains only unique elements from the original array.
5. Using indexOf() Method
Using the indexOf method alone, we cannot remove duplicate elements from the array in JavaScript. The indexOf method is used to find the first occurrence of a specified element from an array, but it will not provide any mechanism to remove the elements from an array. We can use the indexOf method with a combination of other methods to remove the duplicates from an array. The example below shows removing duplicate elements from the array using the indexOf method in JavaScript as follows.
Code:
var ar = ["ABC", "PQR", "XYZ",
"MNL", "PQR", "ABC"];
function rd(ar) {
var un = [];
for(i=0; i < ar.length; i++){
if(un.indexOf(ar[i]) === -1) {
un.push(ar[i]);
}
}
return un;
}
console.log(rd(ar));Output:
In the above example, we have used the indexOf method and for loop method to remove duplicate elements. We have used a “un” array to display the unique elements.
Conclusion
In summary, removing duplicate elements from an array in JavaScript is a common task that every developer encounters at some point. There are several methods available to accomplish this task. In JavaScript , we can remove the duplicate elements by using the set, reduce, foreach, indexOf, and filter methods. Using the indexOf and foreach method, we cannot directly remove the duplicate elements, to remove the elements by using this method, we are using a combination of other methods. Using the set, filter, and reduce method, we can solely remove the duplicate from an array in JavaScript.
Recommended Article
We hope that this EDUCBA information on “Remove Duplicate Elements from Array JavaScript” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
