DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Getting unique values from a JavaScript array using Set
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Getting unique values from a JavaScript array using Set

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' ]
Enter fullscreen mode Exit fullscreen mode

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, maybe because we need to filter on some other conditions?

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

// Set(4) { 'Pizza', 'Chicken', 'Fish', 'Quinoa' }
Enter fullscreen mode Exit fullscreen mode

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, instead of an array, we now get a Set object returned.
This is not always useful.

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

output = [...output];
Enter fullscreen mode Exit fullscreen mode

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 also 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' ]
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (1)

Collapse
 
peerreynders profile image
peerreynders • Edited on
const originalNames = ['Pizza', 'Chicken', 'Pizza', 'Fish', 'Quinoa'];
const uniqueNames = Array.from(new Set(originalNames));
console.log(uniqueNames); // πŸ™‚ ["Pizza", "Chicken", "Fish", "Quinoa"]

const originalFoods = [
  { name: 'Pizza' },
  { name: 'Chicken' },
  { name: 'Pizza' },
  { name: 'Fish' },
  { name: 'Quinoa' },
];
const processedFoods = Array.from(new Set(originalFoods));
console.log(processedFoods); // 😩 [{ name: "Pizza" }, { name: "Chicken" }, { name: "Pizza" }, { name: "Fish" }, { name: "Quinoa" }]

const toEntryByName = (obj) => [obj.name, obj];
const uniqueFoods = Array.from(
  new Map(originalFoods.map(toEntryByName)).values()
);
console.log(uniqueFoods); // πŸ™‚ [{ name: "Pizza" }, { name: "Chicken" }, { name: "Fish" }, { name: "Quinoa" }];
Enter fullscreen mode Exit fullscreen mode

References:

πŸ‘‹ Welcome the newest DEV members

Head over to our Welcome Thread and say hello!