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.

Other tutorials in JavaScript Array series.

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_duplicates = ['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, you created a set using the duplicate array. Creating a set itself eliminates duplicate entries from the array. Finally you converted the newly created Set to an Array using the Array.from method.

Removing Duplicates Using Lodash Library

Lodash is a modern JavaScript utility library providing many utility methods in handy for direct in JavaScript applications. Along with the many set of utility functions that Lodash provides, it also has a method called uniq to remove duplicates from an array. To get started with Lodash in a JavaScript in browser application you need to include Lodash library in the HTML pages script section.

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
</head>

Lodash script methods are referenced using an underscore. Assuming that you have a JavaScript array with duplicates, you can remove the duplicates using uniq method as shown:

var arr = ['a','b','c','a','b']
console.log('unique arra is ',_.uniq(arr))

The uniq method returns an array after removing duplicate elements from the passed in array.

Removing Duplicates Using Underscore.js

Underscore.js is another JavaScript utility library for providing utility functions. From the official documentation ,

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

In order to get started with Underscore.js in your project, include it as a script in your HTML page.

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>

Assuming that you have a JavaScript array with duplicate items, you can remove the duplicates using the method uniq provided by Underscore.js. Here is how the code looks:

<script type="text/javascript">
    var arr = ['a','b','c','a','b']
    console.log('unique array is ',_.uniq(arr))
</script>

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. Finally, you saw how to remove duplicates from JavaScript array using the popular JavaScript utility libraries Lodash and Underscore.js.

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