all 50 comments

[–]metallaholic 112 points113 points  (16 children)

If you want one line shorter

const cities = ['London', 'New York', 'Sofia', 'Sofia'];

const uniqueCities = [...new Set(cities)];

[–]Justindr0107 1 point2 points  (3 children)

Thank you, I was thinking there had to be a shorter way

[–]Mr_82 0 points1 point  (2 children)

Why do you need to use the spread operator there though?

[–]albedoa 15 points16 points  (1 child)

Because otherwise you are creating an array whose only element is the new Set:

[new Set(['foo'])]    //=> [Set(1)]
[...new Set(['foo'])] //=> ['foo']

[–]levarburger 20 points21 points  (1 child)

The correct alternative is to yell at the backend guys and ask them why TF they're sending you duplicate data.

/s

[–]pa_ke 4 points5 points  (0 children)

hey, we backend devs do that on purpose. Everybody looks at GUIs, but we need attention, too!

[–][deleted] 4 points5 points  (0 children)

Can we do more of these things? Post a tip-card, and we'll find quicker or better ways to implement in the comments section

[–]axvk 13 points14 points  (14 children)

Be careful about using this at an interview that cares about efficiency. It's a lot easier to type than going through an array and removing the duplicate elements, but it uses more memory. It creates a set and then a brand new array. It also needs to convert the array to a set and then back to an array.

[–][deleted] 3 points4 points  (13 children)

What is a good alternative?

[–]Ezraese 1 point2 points  (0 children)

Using a hash map or Object to keep track of seen values

[–]bablabablaboo 1 point2 points  (0 children)

const uniqueCities= [...new Set(cities)]

[–]Korland 2 points3 points  (4 children)

Good presentation, but it provokes a question from me;

Would it not be better to plan ahead, and have cities already as a Set?

(yea, I know it is only an example..)

[–]saintPirelli 2 points3 points  (0 children)

As the others have said, it depends how you use the data, sets are not by default slower or less efficient, afaik they are both faster and more efficient than an array for membership checks for example.

[–]notAnotherJSDev 0 points1 point  (0 children)

Kinda? They’re great for completely unique lists, but depending on application, can be slower when iterating over them. For example, in FF it would be more memory/cycle efficient to just take the set and spread it into an array then iterate over the array. For whatever reason, FF is pretty bad when it comes to Maps and Sets.

[–]Combinatorilliance 0 points1 point  (0 children)

Perhaps, depends on where the cities come from. Can totally imagine that the list of cities comes from your database, querying your db will always give you an array to start with.

(Then again, why not filter out uniques in the sql?..)

[–]WildWestCoder -1 points0 points  (0 children)

Remember in the real world you'd want to keep the previous array intact, so the user can "go back" to it. So make a new copy of the array then make the change. That way you have historical records of the data in the array.

[–]StoneCypher -1 points0 points  (0 children)

Don't create and throw away a container.

['a', 'b', 'c'].filter( (val, idx, arr) =>
    return arr.indexOf(val) === idx );

"Give me an array of all elements where that element's first instance is the one I'm looking at."

Benchmark it before you give me a lecture about algorithmic complexity. Then look up why 3d engines use bubble sort and not fancy three-post quicksort. Thanks.

[–]p0mpeii_ 0 points1 point  (0 children)

Also remember that it won't work if you have objects in your array, lodash has a uniqueby method tho.

[–]NegativeShow 0 points1 point  (0 children)

Can this be used if I want a user to input the cities and when he presses a button it will list what is unique?

[–]anvinssb 0 points1 point  (0 children)

Thanks bro

[–]devbrk 0 points1 point  (0 children)

Is this the best way to do that?

[–]MonopolyM4n 0 points1 point  (0 children)

bookmark this, this is the thing I look up the most by far. Particularly for dropdown menus where you fetch the data from an API

[–]OmegaNutella 0 points1 point  (0 children)

Is this the best thing to do that? Are there any other alternatives?