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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

  • By
    Growl-Style Notifications Using MooTools Roar

    When I think of premier MooTools plugin developers, Harald "digitarald" Kirschner is usually one of the first people that come to mind. Harald has built some of MooTools' most popular plugins, including AutoCompleter, FancyUpload, and History Manager. My favorite plugin created...

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!