We frequently come across situations where we need to remove duplicate elements from an array while problem-solving. It’s important to have effective techniques to handle the duplicates as they can create ambiguities in certain situations. This article discusses several methods to remove duplicates from JavaScript arrays.
How to Remove Duplicate Elements from JS Arrays?
Removing duplicates means removing the values in the array that have occurred more than once. Let’s say, arr = [1,2,3,4,4,5]. In this, the number four is present twice. We have to reduce this array to [1,2,3,4,5] after removing the duplicates of 4.
This can be done using several methods. Let’s discuss each of them one by one.
1) Using the indexOf() Method
The simplest method to remove duplicate elements from an array is using indexOf() method. The indexOf() method is used to find the first index of occurrence of an array element. If the element does not exist in an array, the function simply returns a “-1” instead of returning any index.
We iterate over the elements in the array. We check if the element exists in the resultant array. If it does, we do not push it into the array. If it doesn’t, we push into the resultant array.
Let us see the code of creating an array with no duplicate elements from the array with duplicate elements:
//declaring an array
let ogArray=[1,2,3,4,4,5]
//create a new array to store unique elements only
let newArray=[];
//add unique elements to the newArray
for(let i=0;i<ogArray.length;i++) {
//checking if the element of ogArray exists in the newArray already
if (newArray.indexOf(ogArray[i]) === -1) {
//if not, push in the newArray
newArray.push(ogArray[i]);
}
}
//printing the newArray
console.log(newArray);Output:
[ 1, 2, 3, 4, 5 ]In this method, we first created an empty array called newArray. We iterated over the original array using the for loop. For every element of the original array, we check whether the element is present in the newArray already or not using the indexOf() function.
If the indexOf() function returns a negative one, it means that the element is not present in the newArray. Hence, we add the element into the newArray.
2) Using the filter() Method
Another method to remove the duplicates from an array is the filter() method. The filter() creates a new array according to the condition passed in the filter method.
The syntax of the method is given as follows.
let newArray = ogArray.filter(function(element) {
// return true to keep the element, false to discard it
});where,
newArray: the new array formed after applying the filter function
ogArray: original array
function: the function that will be called within the filter function to convert into a new array.
Now, let us take a look at how to remove duplicates using the filter() method. We will compare the index of each element with its first occurrence in the array. If the index matches the first occurrence, we include it in the filtered array and it will be removed from the array.
Here’s how we will write the code:
//declaring an array let ogArray=[1,2,3,4,4,5] //using the filter function let newArray = ogArray.filter((item, index) => ogArray.indexOf(item) === index); //printing the new filtered array console.log(newArray);
Output:
[ 1, 2, 3, 4, 5 ]We iterate over the array elements and check if it has occurred before. If yes, we do not include it in the new array, else, we include it. We have obtained the desired result.
3) Using the Set() Method
The third method is using the Set() method. A set is a data type that stores unique values. No duplicate values are found in a set. A set can hold either unique integers, unique characters, or unique strings.
The Set() method is used to create a set of unique values. Further, the set can be converted to an array using the spread operator.
The syntax of the Set() method is as follows:
let newSet=new Set(ogArray);The set can be converted to an array using the spread operator as shown below:
let newArray=[...newSet];where,
newSet: set returned by the Set() method
ogArray: the original array on which filter() is applied
newArray: the new array formed from set using spread operator
Now, let us try to remove duplicates from an array. Here’s an example:
//declaring an array let ogArray=[1,2,3,4,4,5] //using the Set() Method let newSet = new Set(ogArray) //converting set to array let newArray=[...newSet]; //printing the new filtered array console.log(newArray);
Output:
[ 1, 2, 3, 4, 5 ]We convert the array to a set to remove the duplicates. The set with unique values of the original array is converted back to an array. We have obtained the desired result.
Conclusion
This article discussed various methods to remove duplicates from the array in JavaScript. We used the indexOf() function, the filter() method, and the Set() method to remove duplicates from the array. Each method has its advantages and disadvantages, and the choice depends on factors such as code readability.
