How to Remove Duplicates from JavaScript Array

How to Remove Duplicates from JavaScript Array

How would you remove duplicates from a JavaScript array is a common question in the day to day life of a JavaScript web developer. In this tutorial, you’ll learn about different ways to remove duplicates from JavaScript array.

Remove Duplicates from JavaScript Array Using For Loop

Let’s first try to remove duplicate from JavaScript array using the traditional for loop iteration and another array. What you’ll do is iterate over the duplicate JavaScript array and copy it to another array after checking if it already exists in the new array.


let array_with_duplcates = ['DELHI','NEWYORK','DELHI','GOA','MUMBAI','CALIFORNIA','GOA']

function removeDuplicates(arr){
    let unique_array = []
    for(let i = 0;i < arr.length; i++){
        if(unique_array.indexOf(arr[i]) == -1){
            unique_array.push(arr[i])
        }
    }
    return unique_array
}

console.log(removeDuplicates(array_with_duplcates)); // [ 'DELHI', 'NEWYORK', 'GOA', 'MUMBAI', 'CALIFORNIA' ]

As seen in the above code, you just iterated the array containing duplicate entries and inserted each of item to another array unique_array after checking if it already doesn’t exists in that array.

Remove Duplicates From JavaScript Array Using Filter Method

JavaScript filter method when applied on an array creates a new array which satisfies a particular condition. You can use filter method to check for duplicates in array.
Filter method callback takes in three arguments : current element, index of current element and the array being processed.
Here is how you can use filter to remove duplicates:


function removeDuplicateUsingFilter(arr){
    let unique_array = arr.filter(function(elem, index, self) {
        return index == self.indexOf(elem);
    });
    return unique_array
}

console.log(removeDuplicateUsingFilter(array_with_duplicates));

As seen in the above code, in the removeDuplicateUsingFilter  function filter method is applied to the passed in array. As expected it would create a new array satisfying the condition specified in the callback function. The condition specified would satisfy only for unique elements and duplicates would be neglected, hence it would return an array with duplicates removed.

Also read: How to Create JSON Array in JavaScript

Remove Duplicates From JavaScript Array Using Set

You can use the JavaScript built in object Set to keep unique values of any type. You can make use of Set to remove duplicate entries from a JavaScript array. Here is how the code looks:


function removeDuplicateUsingSet(arr){
    let unique_array = Array.from(new Set(arr))
    return unique_array
}

console.log(removeDuplicateUsingSet(array_with_duplicates));

As seen in the above code, the duplicate array is used to create a Set which would itself eliminate duplicate entries. Then you converted the Set to Array using the Array.from method.

Wrapping It Up

In this tutorial, you saw different ways to remove duplicates from JavaScript array. You used the traditional method of iterating and removing duplicates, the JavaScript filter method and the JavaScript Set object to remove duplicates.

Have you used any other ways to remove duplicates from JavaScript arrays ? Do let us know your thoughts and suggestions in the comments below.