Unique Array Values

By  on  

When you look at any programming language, you see missing features that you find puzzling because the use case seems so common.  One such case is retrieving unique values from an array with JavaScript. Years ago I mentioned an easy way of unique value management using objects instead of arrays, but that's not always an option and doesn't match every use case.

Want to retrieve a unique array of values from an array that may include duplicate values?  You can use new JavaScript spread operator with Set to get an array of unique values:

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

Getting unique array values is another awesome usage of the spread operator.  And don't forget you can merge object properties with the spread operator!

There's no better feeling than being able to remove a library to complete a task that should be native to the language.  This trick brings us one step closer to that!

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

  • By
    Better Pull Quotes with MooTools

    Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the...

Discussion

  1. Patrick Denny

    If you’re forced to stay in EC5-land without the spread operator, you can use the pollyfillable Array.from()

    var unique = Array.from(new Set([1,2,2,3,3,3,4,5])); // [1,2,3,4,5]
  2. Rob Harris

    Doesn’t seem to work for arrays of objects unless I’m missing something.

  3. Anybody using babel with this one should be cautious, this will result in an array with a single set element. Patrick Denny’s is the most predictable form.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!