How to remove duplicate elements from an Array in JavaScript ES6

Have you ever encountered the situation of having to filter an Array or collection in JavaScript to remove duplicate elements?

If you already have experience with web development, you’ve probably been through this situation and may have wondered how to do it.

Do we have to make a loop or for to compare each item? Is there an already JavaScript function that allows us to do this more optimally?

So, to try to explain this issue a little better, I’ll show you some more traditional and also newer ways of ES6 to deal with this situation.

How to remove duplicate elements in JavaScript

For starters, it must be said that there is no one-time solution for all cases. If your array is composed of elements of a diverse nature – for example, numbers, floats, and strings – then a solution might be better.

If it’s just objects, it could be another one. If your Array is small, a simpler solution will hold, but if it’s large, it might be better to use something more complex that will scale better in performance.

Using the filter

We started, therefore, with a very traditional and simple way:

var array = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10];
var unico = array.filter(function(elem, index, self) {
    return index === self.indexOf(elem);
});

Using the filter, we generate a new array based on the function we pass to identify the positions of repeated elements.

This is code that works OK for smaller arrays as it is not something that will scale very well.

Using the filter, we can do another way: hashtables.

function only {
    var jaVisto = {};
    return a.filter(function(item) {
        return jaVisto.hasOwnProperty(item) ? false : (jaVisto[item] = true);
    });
}

Here, we’re basically checking immediately for a duplicate item. However, in this object there is no way to distinguish between string “1” and numeral 1, so I do not recommend it for mixed arrays.

Using jQuery

For those who like jQuery still (I confess that to this day I end up using in simpler projects), we have a very simple solution as well.

var names = ["André","Pedro","Clara","André","João","Marina","Paula", "Marina"];
var namesUnicos = [];
$.each(names, function(i, el){
    if($.inArray(el, namesUnicos) === -1) namesUnicos.push(el);
});

jQuery makes our life much easier, so here we iterate through the array items with each and check if there’s more than one of the same elements. If it exists, we remove it because it is duplicated.

Using set

The set was introduced in ES6, so its support in browsers is smaller, but allows us to remove duplicate elements from our arrays quite simply.

The set stores unique values, so when we pass an array through it, we end up without the repeated ones. So, after we convert the array set, we should revert back to an array.

const array = ["André", 1, 2, 3, "André", 3, "Pedro"];

const setUnico = new Set(array);

const ofVoltaAAray = [...setUnico];

Using reduce

The reduce method is used to ‘shrink’ elements of an array and combine them into a final array based on some function that we pass through it.

In this case, the function will check whether our array contains a particular item. If you don’t have it, send it to the final array. If so, then move on to the next item without playing to the final array.

const array = ["André", 1, 2, 3, "André", 3, "Pedro"];

array.reduce((single, item) => {
    return unico.includes(item) ? Only:[...unico, item]
}, []);

Conclusion

Like everything in web development, there’s a lot of different way to get to the end result. In this brief article I wanted to introduce you to some ways we can do to remove duplicate elements from an array.

You can also use several ready-made libraries that, like jQuery, will give you a little help when writing these functions. Underscore and Lo-Dash are two other possible with their uniq functions.

Is there anything else on this subject, about JavaScript or web development you’d like to know about? Tell me in the comments.

Enjoy!

Gostou do artigo?

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
André Lug

André Lug

Leave a Reply

Your email address will not be published. Required fields are marked *