DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,673 amazing developers

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

Create account Log in
Claire Parker-Jones
Claire Parker-Jones

Posted on

How to create an array of unique values in JavaScript using Sets

TL;DR

let uniqueArray = [...new Set([5,5,2,2,2,4,2])];
// [5,2,4]
Enter fullscreen mode Exit fullscreen mode

Pardon?

Sorry for the verbose title - sometimes things can be explained better with a code example.

Imagine you have a JavaScript array that contains many elements, some of which are duplicated:

let dupeArray = [1,1,4,5,4,4,2,1,5];
Enter fullscreen mode Exit fullscreen mode

Your goal is to remove the duplicates and leave only one entry per value:

let uniqueArray = [1,4,5,2];
Enter fullscreen mode Exit fullscreen mode

You might write a for-loop, or use a map or filter to get this result. There are a million different ways to tackle a problem in computer programming (which is what makes it so fun!). ES6 introduces a bunch of new features, including Sets, which we can also use to solve this problem in one line of code.

Note: the element type could be strings, or a mixture of numbers and strings, but I'm using integers here because they are quicker to type!

What's a Set?

A Set is a new data structure introduced in ES6. Quoting directly from MDN:

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

The rule for unique values is one we can use to our advantage here.

Let's create a Set, add some values to it and query the size. (You can follow along in the developer tools console of a modern browser):

let mySet = new Set().add(1).add(3).add(2).add(1);
// Set(3) {1, 3, 2}
mySet.size
// 3
Enter fullscreen mode Exit fullscreen mode

Notice how the final 1 wasn't added and the size of the Set remained at 3 instead of 4. In an array, it would have been added and the length would be 4.

There are two ways to add values to a Set. Firstly by using the add method as above. Secondly by passing an array to the constructor (new Set()):

let arraySet1 = new Set([3,2,1]);
// Set(3) {3, 2, 1}
Enter fullscreen mode Exit fullscreen mode

Duplicated values are also removed if they are included in the initial array:

let arraySet2 = new Set([8,8,9,2]);
// Set(3) {8,9,2}
arraySet2.size;
// 3
Enter fullscreen mode Exit fullscreen mode

You can probably see where this is going. All thatโ€™s left to do is to convert this Set into an array and weโ€™ve achieved our original goal. There are two ways to do this: both using ES6 methods.

Array.from()

The Array.from method creates a new array from an array-like structure:

let dupeArray = [3,2,3,3,5,2];
let uniqueArray = Array.from(new Set(dupeArray));
Enter fullscreen mode Exit fullscreen mode

Spread operator ...

Those three dots are ubiquitous in ES6. They crop up everywhere and have several uses (and they're a right pain to google). When we use them as the spread operator they can be used to create an array:

let uniqueArray = [...new Set(dupeArray)];
Enter fullscreen mode Exit fullscreen mode

Which of these two methods should you use? The spread syntax looks cool, but Array.from is more explicit in its purpose and easier to read. They both accomplish the same thing here so the choice is yours!

Conclusion

Something that would have took many lines of code and variables can now be executed in a one-liner in ES6. What a time to be alive.

let uniqueArray = [...new Set([5,5,2,4,2])];
// [5,2,4]
Enter fullscreen mode Exit fullscreen mode

Top comments (13)

Collapse
 
xngwng profile image
Xing Wang

Good highlight this feature.

However, it maybe worth pointing out that with Set, you can't control the equality operator.

It uses '===', which only work only off same actual object or same value for a primitive.

Which limits the usage somewhat compares to other methods such as map or filter.

Collapse
 
jochemstoel profile image
Jochem Stoel

@claireparker I have been hanging around in this neighborhood for little over a year now and appreciated a lot of quality content from many different sources but this is the first time I am Googling something and it leads to finding the answer here on this website.

You have a new follower.

Collapse
 
itsmeseb profile image
Sebastian L. K. Sรธrensen

I will implement this right away in a project I am working on. Although I like the Array.from() better, since it's easier to read. I like easy-to-read code :) Thank you for sharing!

Collapse
 
mehraas profile image
Ashish Mehra • Edited on

I used to filter and map over an array to remove duplicates. Thanks for sharing this method, Mam.

Collapse
 
seth10 profile image
Seth T

Is there any difference in performance between Array.from and using the spread operator?

Collapse
 
kimlongbtc profile image
KimLongUn

"They both accomplish the same thing here so the choice is yours!"

So i dont know if there is some missunderstanding here but as far as i see it they dont work the same as in my case using the spread operator returns

[Set(7)]
0: Set(7) {"anthropological", "security", "surveillance", "technology", "biology", โ€ฆ}

while using Array.from returns

(7)ย ["anthropological", "security", "surveillance", "technology", "biology", "extra-algorithmic experience", "randomness"]

Collapse
 
neovortex profile image
Neocortexxx • Edited on

"They both accomplish the same thing here so the choice is yours!"
Well, actually she refers to the spread operator ('...') and Array.from.
In both cases you still have to use new Set.

Collapse
 
evangelistaagil profile image
Marcelo Faundez

Great tip. Thanks

Collapse
 
sait profile image
Sai gowtham
Collapse
 
javascripterika profile image
JavaScriptErika

Great article and explanations! Thank you for your awesome insight and clear examples!

Collapse
 
ayoalfonso profile image
AyoAlfonso

What if the elements are deep objects themselves rather than just basic elements like integers and alphabets.

Collapse
 
nutondev profile image
nuton.dev

We will read about it in your post, right? :)

Collapse
 
wbarath profile image
William Barath

// ES5:
Object.keys([1,1,2,2,3,4].reduce((prev,val)=>(prev[val]=1,prev),{}))
// ['1', '2', '3', '4']

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!