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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

  • By
    MooTools Kwicks Plugin

    I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original...

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.

    • Muhammad Al Faris

      If your array is an object, you can use map function, to get the value in an array.

      then you can run method like above.

  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.

  4. Thanks David! Very helpful! :)

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