"That's what she Set!" - mastering data with 7 new JavaScript Set methods
Tags: javascript, set, webdev, programming
Published: 2024-01-12 14:51:27

In this article, I will be spilling the beans on the coolest, latest methods that probably will turn the Set object into a rockstar. I noticed these new methods in July and finally was able to test them in Safari. All of them are fresh ways to play with data, do crazy intersections, and make unions so smooth you'll wonder how you ever lived without them.


So, 7 new Set methods are [under construction](https://github.com/tc39/proposal-set-methods) now and I will show you the way they interact with data: 

- `difference()`
- `intersection()`
- `isDisjointFrom()`
- `isSubsetOf()`
- `isSupersetOf()`
- `symmetricDifference()`
- `union()`
  

Now, let's delve into these methods and see how they elevate the power of Sets in handling data. 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif">

We will be working on these two wonderful Sets containing the employees of two best offices of the Dunder Mifflin paper company:
  
```javascript  
  
const scrantonOfficeEmployees = new Set([ "Michael Scott", "Jim Halpert", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson" ]);


const stamfordOfficeEmployees = new Set([ "Jim Halpert", "Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner" ]);


const dunderMifflinEmployees = new Set([...scrantonOfficeEmployees, ...stamfordOfficeEmployees]); 
  
```  

- The `difference()` method of Set instances takes a set and returns a new set containing elements in this set but not in the given set:
  
```javascript  
  
dunderMifflinEmployees.difference(scrantonOfficeEmployees);

// Output: Set (4) {"Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner"}
  
```  
  
- The `intersection()` method of Set instances takes a set and returns a new set containing elements in both this set and the given set: 

```javascript  
  
stamfordOfficeEmployees.intersection(scrantonOfficeEmployees);  

// Output: Set (1) {"Jim Halpert"}
  
```  
  
<img width="100%" style="width:100%" src="https://media.giphy.com/media/YRdBZ4CDweTozHWxh0/giphy.gif">

- The `symmetricDifference()` method of Set instances takes a set and returns a new set containing elements which are in either this set or the given set, but not in both:
  
```javascript  
  
stamfordOfficeEmployees.symmetricDifference(scrantonOfficeEmployees);  

// Output:  Set (18) {"Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner", "Michael Scott", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson"}
  
```  
  
- The `union()` method of Set instances takes a set and returns a new set containing elements which are in either or both of this set and the given set: 

```javascript  
  
stamfordOfficeEmployees.union(scrantonOfficeEmployees);  

// Output: Set (19) {"Jim Halpert", "Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner", "Michael Scott", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson"}
  
```  
  
- The `isSubsetOf()` method of Set instances takes a set and returns a boolean indicating if all elements of this set are in the given set: 

```javascript  
  
new Set(["Michael Scott", "Jim Halpert"]).isSubsetOf(scrantonOfficeEmployees);  

// Output: true  
  
```  
  
- The `isSupersetOf()` method of Set instances takes a set and returns a boolean indicating if all elements of the given set are in this set: 

```javascript  
  
scrantonOfficeEmployees.isSupersetOf(new Set(["Michael Scott", "Jim Halpert"])); 
 
// Output: true  
  
```  
  
- The `isDisjointFrom()` method of Set instances takes a set and returns a boolean indicating if this set has no elements in common with the given set: 

```javascript  
  
stamfordOfficeEmployees.isDisjointFrom(dunderMifflinEmployees);  

// Output: false  
  
```


Stay tuned for further updates and enhancements to the Set object's capabilities. You can keep track of all the details on the [official Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).


<img width="100%" style="width:100%" src="https://media.giphy.com/media/jqS1XUg1YKjXPr3MEx/giphy.gif">