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.
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
Right now. Just... stop it.
Here's your dead-simple rule for de-duping JS arrays:
If the task is only to de-dupe a JS array containing scalar values, you should be reaching for
Set(). Every. Single. Time.
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
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:
Each element in a set must be unique. To be more specific, a
Set()will not allow you to create duplicate elements.
It can be initiated with an array - and if that array contains duplicates, the duplicates will be ignored.
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:
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.
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.
Set(), please do us all a favor - and tell them to get the hell off the interwebs, before they hurt themselves or others.