De-duplicating JavaScript arrays with ease using Set

I was prototyping something recently and needed to de-duplicate a few arrays. This background is unlikely to be of interest to you so I won’t be offended if you skip down to the code. For anyone remaining (hello? … crickets) I’ll explain my use case. I’m prototyping some UI with Lit and need to create a menu from data.

By the time I have done a few array methods to get the data close to what I want, it looks something like this:

const data = ["Shots", "Tackles", "Assists", "Shots", "Tackles", "Assists"];

But I just want one lot of those words for my menu; just the unique values. Looking at it, I could just split that array in half but I can’t guarantee it will always have an exact number. What I want is a de-duplicated version.

There have been a number of ways to do this over the years but as ES6 gives us a lovely, elegant and terse way of doing it, I’m saving the info here for my future self. Here is the simplest use case of de-duplicating that prior list:

De-duplicating array

return [...new Set(data)];

Wait, what?

This uses destructuring to create a new array and the contents of that array is created using Set.

Here is the headline for Set at MDN:

The Set object lets you store unique values of any type, whether primitive values or object references.

So by creating a new array made up of a new Set object, made of the unique values of our array of data, we get exactly what we need.

I can the sense that might not be useful enough, ‘but Ben, what about when I have an array of objects and I need to de-duplicate the values of one of the keys?’.

[rolls up sleeves and looks for longer on Stack Overflow]

De-duplicating arrays of objects based upon their keys

Consider this data and the fact I want to get the unique names from the data:

const data = [
    {
        name: "Tre",
        age: 25,
    },
    {
        name: "Peter",
        age: 32,
    },
    {
        name: "Sanjay",
        age: 33,
    },
    {
        name: "Peter",
        age: 22,
    },
    { name: "Sanjay", age: 63 },
];

let deduped = [...new Set(data.map((item) => item.name))]; // ["Tre","Peter","Sanjay"]

Work from the inside out to understand this. Unlike the prior version where we already had the values to de-duplicate, here we need to create that list first. We do that by mapping over the part of the object we are interested in, the name. Then everything else is as the first example, the Set inside the de-structuring creates the unique set of values from the list of names.

I love these short one liners that solve very specific problems. Then I enjoy just as much figuring out how they do what they do.

Hopefully you can remember these next time you want to extract unique values from an array.