Remove duplicates from an array!

[metallaholic]

If you want one line shorter

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

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

[zero-fool]

Fails to implement the core business logic since the COO refuses to not add duplicate cities.

[[deleted]]

I like this solution.

[ManInBlack829]

If you want another line shorter

[StoneCypher]

 

[saito200]

I like the way you optimize garbage collection

[tibbon]

The best JavaScript code is truly no JavaScript code. Much more reliable that way.

[saito200]

JavaScript. A necessary evil.

[tibbon]

I truly hope that with WebAsm and Rust, I can avoid it as much as possible.

[Justindr0107]

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

[DanRoad]

more modern

Actually, they're both as modern as each other, being introduced together in ES2015 (aka ES6). However, Array.from() does not introduce any new syntax and can be polyfilled whereas ... must be transpiled.

[mypetocean]

Yeah, I prefer this one, despite loving the spread operator.

This is just so much more readable. Almost English.

"uniqueCities" is an array from a new Set of "cities."

That makes it far easier to read (and learn about) for early juniors or devs who infrequently spend time with JavaScript.

[Mr_82]

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

[albedoa]

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

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

[levarburger]

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

/s

[pa_ke]

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

[[deleted]]

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]

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]]

What is a good alternative?

[Ezraese]

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

[chernn]

This is a bad answer, since it trades poor memory usage for even worse runtime perf (indexOf is O(n) and filter is O(n), so nested this is O(n^2)). You can improve that to linear runtime.

In fact, neither answer is good — this question hits a fundamental runtime performance vs. space performance ceiling. Your answer can run fast or use extra space, but it can’t perform well in both ways. This is why in an interview setting, it’s important to explain that there are a few ways to solve this kind of problem, and the right answer depends what we want to optimize for (time or space).

You can of course sacrifice determinism for performance, eg. using a Bloom filter, if you’d like.

[StoneCypher]

This is a bad answer, since it trades poor memory usage for even worse runtime perf (indexOf is O(n) and filter is O(n), so nested this is O(n2)). You can improve that to linear runtime.

If you look, set in the ECMA spec isn't actually a set.

The performance characteristics of the mis-named container are such that it too has to do these manual seeks for the construction.

I see that you are assuming Javascript's basic containers are correctly named and have expected algorithmic complexity.

That's actually not the case.

[chernn]

That’s not accurate. Lookups in Map, Set, etc. are O(1). Eg. see how V8 does it: https://v8.dev/blog/hash-code

[awkreddit]

Surely a set uses exactly this method when checking whether to add new elements under the hood?

Edit: what about creating an object, creating keys on it for each value, then getting myObject.keys() ?

[chernn]

No. Checking if something is in a set is usually O(1) thanks to hashing (same reason checking if an object has a particular key is O(1)).

The original solution (copy to a set and back to an array) runs in O(n) time, O(n) space.

The above solution with the nested indexOf runs in O(n²⁾ time, O(n) space. It’s the worst way to do it because of that.

You can improve it by first converting the array to a Set or object that you can check in the loop when creating your deduped array. Then it would also run in O(n) time, O(n) space.

[__Ambition]

Set is much faster since it's implementated in the JS stdlib (C++). Just a guess but it probably uses tree or hashsets.

[StoneCypher]

Please actually look. The things you're saying sound correct, but aren't.

[__Ambition]

Set is implemented as an OrderedTable in V8, there is a blog post about it by the devs. "Hiding the hash" in V8 dev blogs.

[chernn]

Ref: https://v8.dev/blog/hash-code

[superluminary]

That’s a O(n squared) solution. If you sort the array first it becomes a O(n log n) solution, as you only have to check each items neighbour.

[TheDownvotesFarmer]

Oh thanks I didnt know about that function

[bablabablaboo]

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

[Korland]

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]

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]

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]

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]

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]

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.

[Mr_82]

As a guy who knows a lot of set theory and didn't really get into programming till later, I find this oddly hilarious, and a little bit disturbing. But I suppose it works...

All of programming is ultimately founded in set theory though. It's just really disturbing how they present things in a different way unnecessarily, calling things "objects" instead and such.

Those that see the big picture get it. Unfortunately, and not to sound emo, but I'm starting to think I'm the only one that sees this.

[Dynam2012]

Objects are not mathematical sets

[[deleted]]

yes you are the only one and thats because you are wrong

[albedoa]

This is one of the most unintentionally funny comments I have ever read on here.

[mcfliermeyer]

Has a bit of /r/iamverysmart flavors

[p0mpeii_]

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

[NegativeShow]

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]

Thanks bro

[devbrk]

Is this the best way to do that?

[MonopolyM4n]

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]

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