[JavaScript] Setオブジェクトの新しいメソッドを紹介するよ

# 🐣 はじめに
JavascriptのSetオブジェクトに新たなメソッドが追加され、主要なブラウザーエンジンで利用できるようになったので今回はこれらのメソッドについて調査したものを紹介してみようと思います。

Setオブジェクトの基本的な使い方については [「setオブジェクト」の検索結果 \- Qiita](https://qiita.com/search?q=set%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88) をご参照ください。

# 🆕 Set メソッドの新機能について
クロスブラウザサポートを備えた新しいメソッドの要点は以下の通りです。


|メソッド名| 説明| 返り値 |
|---|---|---|
| `union()` | このセットと指定されたセット内のすべての要素を含む新しいセットを返します。 | Setオブジェクト |
| `intersection()` | このセットと指定されたセットの両方の要素を含む新しいセットを返します。 | Setオブジェクト |
| `difference()` | このセットにはあるが指定されたセットにはない要素を含む新しいセットを返します。 | Setオブジェクト |
| `symmetricDifference()` | どちらかのセットに含まれる要素を含む新しいセットを返しますが、両方に含まれる要素は返しません。 | Setオブジェクト |
| `isSubsetOf()` | セットのすべての要素が特定のセット内にあるかどうかを示すブール値を返します。 | Boolean |
| `isSupersetOf()` | 指定されたセットのすべての要素がこのセット内にあるかどうかを示すブール値を返します。 | Boolean |
| `isDisjointFrom()` | このセットに特定のセットと共通する要素がないかどうかを示すブール値を返します。 | Boolean|



それぞれの機能についてコードで解説していきます。

## union

`union()` は指定された集合に含まれるすべての要素を返します。この際指定された集合内に同一の要素がある場合、重複は省かれます。

ベン図を使用すると次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/5340f6e6-2ca1-cfc1-b407-5332e724de13.png)

引用：[Set\.prototype\.union\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union)


```js

const set1 = new Set(["foo", "bar", "baz"]);
const set2 = new Set(["hoge", "fuga", "foo", "piyo"]);

const unionSet = set1.union(set2);

unionSet.forEach((item) => console.log(item));
// => foo
// => bar
// => baz
// => hoge
// => fuga
// => piyo

```

## intersection

`intersection()` は集合の共通部分を返し、両方の集合に存在する要素を確認できます。

ベン図を使用すると次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/b1ac2f23-ce80-1717-dbf9-9de2912889cc.png)
引用：[Set\.prototype\.intersection\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection)

```js
const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const intersectionSet = set1.intersection(set2);

intersectionSet.forEach((item) => console.log(item));
// => foo
// => piyo

```

## symmetric difference
`symmetricDifference()` は、どちらか片方のセットに含まれる要素を返します。

ベン図を使用すると次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/bc0142d1-2a61-f36c-891f-bb287391227c.png)
引用：[Set\.prototype\.symmetricDifference\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference)

```js
const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const setNotBoth = set1.symmetricDifference(set2);

setNotBoth.forEach((item) => console.log(item));
// => bar
// => hoge

```

## difference

`difference()` は、片方の集合に含まれ、もう片方の集合には含まれない要素を返します。

ベン図を使用すると次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/676a9ef6-bde5-7b8a-0967-41d60edccea3.png)
引用：[Set\.prototype\.difference\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference)

```js
const set1 = new Set(["foo", "bar", "piyo"]);
const set2 = new Set(["hoge", "foo", "piyo"]);

const set1Only = set1.difference(set2);
const set2Only = set2.difference(set1);

set1Only.forEach((item) => console.log("set1のみに含まれる: ", item));
// => set1のみに含まれる:  bar

set2Only.forEach((item) => console.log("set2のみに含まれる: ", item));
// => set2のみに含まれる:  hoge

```


## isSubsetOf / isSupersetOf
ここまでのメソッドでは新しい `Set` オブジェクトを返しましたが、以下で紹介するメソッドでは指定した `Set` オブジェクトの状態の真偽値を返します。

`isSubsetOf()` は引数で渡したセットのすべての要素が指定された集合内にあるかどうかを示す真偽値を返します。

`isSupersetOf()` は引数で渡したセットのすべての要素が指定された集合内にあるかどうかを示す真偽値を返します。

ベン図を使用すると次のようになります。

| isSubsetOf() | isSupersetOf() |
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/cc57e17d-bf83-834f-a07d-05f77df76a89.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/df6e96ad-98ba-259d-a264-7801c526902c.png)|

引用：
[Set\.prototype\.isSubsetOf\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf)
[Set\.prototype\.isSupersetOf\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf)


```js
const fours = new Set([4, 8, 12, 16]);
const evens = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]);

console.log(fours.isSubsetOf(evens)); 
// => true

console.log(fours.isSupersetOf(evens)); 
// => false

```

## isDisjointFrom
`isDisjointFrom()` は引数で渡したセットの要素が指定されたセット内と**共通の要素がない**かの真偽値を返します。

ベン図を使用すると次のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14082/517255f4-78ea-f11e-377a-48db7391d4b1.png)
引用：[Set\.prototype\.isDisjointFrom\(\) \- JavaScript \| MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom)

```js
const set1 = new Set(["foo", "bar", "baz"]);
const set2 = new Set(["hoge", "fuga", "piyo"]);

console.log(set1.isDisjointFrom(set2)); 
// => true(2つのSetに共通の要素がない)

```

# 🏋️‍♀️ まとめ
Setオブジェクトの新しいメソッドが主要なブラウザでも使用できるようになりより便利にSetが使えるようになりそうですね
（もし間違っている箇所などあればコメントで教えて下さい）


# 🌈 参考URL
- [Set \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)