JS Set - Part 1
Tags: javascript, set, uniquenessfilter
Published: 2019-09-18 03:45:03

---
title: JS Set - Part 1
published: true
description: Removing duplicate objects from a hash made easy(-ish) with Set.
tags: #JS, #JavaScript, #Set, #UniquenessFilter
---

As with everything new I experience nowadays I came across the powerful JS Set object while searching for a way to remove duplicate objects from an array of objects.

I have been reworking and upgrading a project of mine, [ReadThat](https://github.com/anders1216/ReadThat), recently and while integrating a voting function I have into a commenting function I have I came across an issue with a sorting function I have. It adds a duplicate instance of one of the things being sorted! Instead of reworking the thing my sort function sorts (a hasty decision on my part to use an overly sparse hash to store vote counts); or to rework what information is passed from server to client (rework backend to store vote counts (too expensive *maybe*)) I chose to remove the duplicates and call it good. Now as everyone knows planning is key, but what not everyone seems to know and or acknowledge is that when things don't go to plan there's a 99.9999% chance that there's a work around. So I chose my work around aka the Set method; [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) for those so inclined. 

###What is Set

Set is a powerful tool that allows the user to create a collection of *unique* values of primitive values or Objects.

>The Set object lets you store unique values of any type, whether primitive values or object references.

and from the description;

>Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

-[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)

It's basically a super open ended collection of unique values that allows the bridging of Array and Object methods through the creative and insightful use of their respective methods.


####Quickly, how to make a set...(is this not what you came here for!?)

"But Anders!? Where's the Beef?"

I won't go too in depth into the Set methods but briefly here's how to make a set.

``` javascript
let thing = [[1 ,"two", #], {4: $}, {5: %}]

let thingSet = new Set(thing)
```
or just
```
let thingSet = new Set([[1 ,"two", #], {4: $}, {5: %}])
```

####Make a set into an array - Peasy!

Working with Set objects is relatively easy. Even though Set Objects are iterable the most efficient way I've found to work with Set Objects is converting them into a more common data structure with [`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) or [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)

```javascript
//thingSet from before BTW!
let thingSetArr = Array.from(thingSet)
```

####Sorting an Array of Objects with Set...(Are you not entertained!?)

So Now for what you came hee -- "Found the Beef". Erm, uh, OK.
Now for what you came here for, sorting an Array of Objects. 
Remembering back to my predicament at the beginning of this post, after much deliberation and a oft found stackoverflow post later I had a solution to my problem. With the Set Object and its associated method and the `Array.from()` method my path was clear. In order to achieve mediocrity and wrought the wrath of bugs I must `Array.map()` out an array of ids from my Object-Array, create a *unique* Set of those ids, convert that Set back into an Array with `Array.from()` while maintaining the ability to iterate through it in one variable assignment and finally mapping through the Array of ids while returning found objects from the original Object-Array. Voila! A _*unique*_ array of Objects!

```javascript
    const output = Array.from(new Set(placeholder.map(a => a.id))).map(id => {
        return placeholder.find(a => a.id === id);
    })
```


Thanks for checking out this week's edition. Have a Job for me? contact me on [linkedIn!](https://www.linkedin.com/in/anders-hornor/) :D