Javascript Set operations can now be performed natively
Tags: javascript, webdev, programming
Published: 2024-07-04 07:53:27

# Introduction

JavaScript now has support for [Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) methods in multiple environments:
[Safari 17 on 2023/09/18](https://webkit.org/blog/14445/webkit-features-in-safari-17-0/), [Chrome122 on 2024/02/21](https://developer.chrome.com/blog/chrome-122-beta?hl=ja#set_methods) and [Firefox127 on 2024/06/11](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/127#javascript) implemented it, making set operations available in all major browsers. It has successfully reached Stage 4, or up, as [ES2025](https://github.com/tc39/proposals/blob/main/finished-proposals.md).

# What is it?

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

```js
new Set([1, 2, 3, 4]).intersection( new Set([1, 3, 5])); // Set{1, 3}
new Set([1, 2, 3, 4]).intersection( new Set([5, 6, 7])); // Set{}
```

It is the so-called AND.

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

```js
new Set([1, 2, 3]).union( new Set([1, 3, 5])); // Set{1, 2, 3, 5}
new Set([1, 2, 3]).union( new Set([4, 5, 6])); // Set{1, 2, 3, 4, 5, 6}
```

It is the so-called OR.

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

```js
new Set([1, 2, 3]).difference( new Set([1, 3, 5])); // Set{2}
new Set([1, 2, 3]).difference( new Set([4, 5, 6])); // Set{1, 2, 3}
```

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

```js
new Set([1, 2, 3]).symmetricDifference( new Set([1, 3, 5])); // Set{2, 5}
new Set([1, 2, 3]).symmetricDifference( new Set([4, 5, 6])); // Set{1, 2, 3, 4, 5, 6}
```

It is the so-called XOR.

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

Returns true if all elements are included in the argument.

```js
new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 3, 4])); // true
new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 4, 5])); // false

new Set([1, 2, 3]).isSubsetOf( new Set([1, 2, 3])); // true
new Set().isSubsetOf( new Set([1, 2, 3])); // true
```

It is also true if the element is an empty set or A==B.

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

Returns true if the argument is contained in an element.

```js
new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 3, 4])); // false
new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 4, 5])); // false

new Set([1, 2, 3]).isSupersetOf( new Set([1, 2, 3])); // true
new Set([1, 2, 3]).isSupersetOf( new Set()); // true
```

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

Returns true if the elements and arguments have nothing in common.

```js
new Set([1, 2, 3]).isDisjointFrom(new Set([4, 5, 6])); // true
new Set([1, 2, 3]).isDisjointFrom(new Set([2, 5, 6])); // false

new Set([]).isDisjointFrom(new Set([])); // true
```

# Conclusion

These functions have been available to the public through [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#implementing_basic_set_operations) for a long time.
Each of these functions is less than 10 lines long, and the self-implementation of the set operation itself is not difficult at all.

# Ref

- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
- [Original article](https://qiita.com/rana_kualu/items/444cbac3a2ca26152d7a)