Remove Duplicates With Set() - Full-Stop
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-03-02 21:07:59

This will probably seem like a trivial and overly simplistic post.  But I've seen the _wrong_ answer posted so frequently - even right here on Dev.to - that it's honestly starting to get me kinda annoyed.

Everyone who wants to throw their hat in the ring as some kinda JS "mentor" decides to crank out an article about de-duping arrays.  On the surface, it kinda makes sense.  Because de-duping an array is a common coding task given to people during whiteboard interviews.  

It's one of those questions that seems downright silly for a seasoned dev.  But more junior types might struggle with it.  More importantly, there are (theoretically) _many_ different ways that you could attack the problem.  Thus, it could potentially give the evaluator a great chance to "see" how you think.  

So this should be a great chance to write up an awesome how-to article, right?  You can display your epic dev knowledge and maybe help some noobs while you burnish your reputation... _right_??

Unfortunately, I see sooooo many articles where the proposed approach is just downright _wrong_.  I'm not claiming that other proposed solutions don't _work_.  I'm saying that other proposed solutions "work" - but they're still very, very _wrong_.  
<br/><br/>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/canrfl7ebh28284gwahv.jpg)
## Use Set() - It's _That_ Simple
Let's have a long, detailed, crazy-intense discussion about all the various ways we could de-dupe an array.  Or... let's not.  That doesn't sound like much fun at all.  Instead, let's just use `Set()` - and then go on to something far more productive.

I've lost track of how many times I've seen - on this site, on Stack Overflow, on Medium, on... wherever - someone claiming to show you how to de-dupe an array.  And then they start pulling out a ridiculous mess of `.reduce()`, `.filter()`, `.map()`, `.forEach()`, or `.whateverArrayPrototypeInterestsMeToday()`.

_Stop.  It._

Right now.  Just... _stop it_.

Here's your dead-simple rule for de-duping JS arrays:
<br/>

> If the task is _only_ to de-dupe a JS array containing scalar values, you should be reaching for `Set()`.  Every.  Single.  Time.

<br/>Honestly, this is a fairly narrow use-case in real-life code.  I rarely find myself with an array for which I _only_ need to de-dupe it.  More often than not, there's some combination of tricks I need to perform on the array.  And in those cases, it's perfectly natural (and correct) to start reaching for all of those `Array.prototype` functions.  But if you truly just need to de-dupe an array then, for the love of god, man, just use `Set()`.  Period.
<br/><br/>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i82yi6qg92hketffboqv.jpg)
## Secret Knowledge(???)
This really _shouldn't_ be any kind of "secret knowledge".  `Set()` isn't a hidden "trick".  But most devs rarely use `Set()` and know little about it.  The fact is that I rarely use it myself.  But I know what it does.  Specifically, I know that it has three very cool features:

1. Each element in a set must be unique.  To be more specific, a `Set()` will not _allow_ you to create duplicate elements.

1. It can be initiated with an array - and if that array contains duplicates, the duplicates will be ignored.

1. You can use the spread operator to convert it back into a plain-ol' array.

When you combine all these features, you have a powerful (and dead-simple) de-duping tool.  It looks like this:

```javascript
const theDupes = [6,7,8,6,7,2,5,6,7,8,3,6,8,7,2,5];
const noDupes = [...new Set(theDupes)]; // [6,7,8,2,5,3]
```

Maybe you're thinking that this isn't often recommended due to _performance_??  Umm... no.  This technique typically beats every other approach. In fact, the comparison is rarely even close.  

De-duping with `Set()` uses fewer LoC than any of those other tutorials.  It's far faster than other approaches.  So why would anyone suggest using something else??

The only valid excuse I can muster is if you're not using Babel and your code needs to run on IE.  But if you're not using Babel and your code needs to run on IE, you have a lot bigger problems than de-duping arrays.

So the next time you see someone hawking a "How To De-Dupe An Array In JavaScript" tutorial, and they _don't_ use `Set()`, please do us all a favor - and tell them to get the hell off the interwebs, before they hurt themselves or others.