Subscribe

Getting unique values from a JavaScript array using Set

โœ๏ธ

Using the JavaScript Set method to get unique values from an array

17 Aug, 2021 ยท 2 min read

Often we want to get unique values from a single array. Luckily for us, this is relatively easy in modern JavaScript.

To give you a small recap on how one would do this with a manual loop and push in JavaScript.

original = ['Pizza', 'Chicken', 'Pizza', 'Fish', 'Quinoa'];

output = [];
original.forEach((item) => {
  if (output.indexOf(item) === -1) {
    output.push(item);
  }
});

// [ 'Pizza', 'Chicken', 'Fish', 'Quinoa' ]

As you can see, this removes the duplicate Pizza value.

JavaScript Set to the rescue

This is something Set is super good at.

Let's say we need to loop this data first because we need to filter on other conditions.

output = new Set();
original.forEach((item) => {
  output.add(item);
});

// Set(4) { 'Pizza', 'Chicken', 'Fish', 'Quinoa' }

As you can see in this example, we don't have to check if the value exists since the JavaScript set only accepts unique values.

However, we now get a Set object returned instead of an array. This is not always useful.

We can convert this Set object to an array using the JavaScript spread operator.

output = [...output];

This takes the Set object and converts that into a flat array!

Set unique values one-liner

If you don't need to do any other filter conditions in a for loop (or array method), we can use a one-liner to convert an array into a unique valued array.

original = ['Pizza', 'Chicken', 'Pizza', 'Fish', 'Quinoa'];
output = [...new Set(original)];

// [ 'Pizza', 'Chicken', 'Fish', 'Quinoa' ]

I've also created this Codepen, where you can view the console logs to see what happens.

See the Pen Vanilla JavaScript date toLocaleString by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Removing all vowels with JavaScript

3 Dec, 2022 ยท 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 ยท 3 min read

10 games to learn JavaScript

Join 1903 devs and subscribe to my newsletter