ES6 JavaScript : Remove Duplicates from An Array -

In this tutorial, you’ll learn how to remove duplicates from an array using ES6 methods like Set and ES5 methods. Let’s have a look at the different methods which help us to remove duplicates.

Other tutorials in JavaScript Array series.

// <![CDATA[ (adsbygoogle = window.adsbygoogle || []).push({}); // ]]>

Using ES6 Set

You can use the JavaScript built in object Set to keep unique values of any type. You can make use of ES6 Set to remove duplicate from an 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.

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.

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

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.

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.

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.

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:

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

Wrapping It Up

In this tutorial, you saw different ways to remove duplicates from an array. You used the traditional method of iterating and removing duplicates, the array filter method and ES6 Set to remove duplicates. You also saw how to remove duplicates from an array using 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.