2019の終わりにES2019を覚えておく

ES2015が世の中に浸透し始めたときには、必死こいて「このビッグウェーブに乗らなきゃ！」と人並みに勉強しましたが、それ以降の動向は追っていませんでした。ここのところ、年末ということもあってかES2019についての記事をちらほら見ることが増えて、今年のことは今年のうちに覚えておこう、という動機です。ES2016〜ES2018についても理解していませんが、それは来年まとめてやっつけます。

ES2019には何が含まれているのか、この[互換性テーブル](https://kangax.github.io/compat-table/es2016plus/)を見ると分かりやすいです。

互換性テーブルを元にES2019に追加された機能は次の通りです。

**2019 features**

- Object.fromEntries
- string trimming
- Array.prototype.{flat, flatMap}

**2019 misc**

- optional catch binding
- Symbol.prototype.description
- Function.prototype.toString revision
- JSON superset
- Well-formed JSON.stringify

今回は、この中で2019 featuresの3つ、2019 miscの中から覚えておくと良さそうな `optional catch binding` をピックアップして勉強します。

それではひとつひとつ何をするためのものなのか、ざっくりと見ていきます。

※本記事は理解力、読解力ともに難がある私自身が理解するために、かなり噛み砕いた文章になるので、文字を読むのが得意な方は[互換性テーブル](https://kangax.github.io/compat-table/es2016plus/)から各機能のリンク先を読むことをオススメします。

## Object.fromEntries

>Object.fromEntries() メソッドは、キーと値の組み合わせのリストをオブジェクトに変換します。
>MDN：[Object.fromEntries](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)

```js
const fruits = Object.fromEntries([['banana', 2], ['apple', 3]])
// {banana: 2, apple: 3}
```

参考：[Object.fromEntries](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)

## string trimming

[互換性テーブル](https://kangax.github.io/compat-table/es2016plus/)を参考に、次の4つの機能について見ていきます。

- String.prototype.trimLeft
- String.prototype.trimRight
- String.prototype.trimStart
- String.prototype.trimEnd

`String.prototype.trimLeft` は `String.prototype.trimStart` のエイリアス、`String.prototype.trimRight` は、 `String.prototype.trimEnd` のエイリアスなので、実質以下2つを覚えれば良いと解釈します。

- String.prototype.trimStart
- String.prototype.trimEnd

### String.prototype.trimStart

先頭の空白を削除します。

```js
const sample = '     こんにちは、世界よ     ';
console.log(sample.trimStart());
// 'こんにちは、世界よ     '
```

参考：[String.prototype.trimStart](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft)

### String.prototype.trimEnd

末尾の空白を削除します。

```js
const sample = '     こんにちは、世界よ     ';
console.log(sample.trimEnd());
// '     こんにちは、世界よ'
```

参考：[String.prototype.trimEnd](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight)

## Array.prototype.{flat, flatMap}

### Array.prototype.flat
ネストされた配列をフラットにします。

```js
const arr1 = [1, 2, [3, 4]];
// [1, 2, 3, 4]
```

参考：[Array.prototype.flat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

### Array.prototype.flatMap

`map` したものをフラットにしたい場合、`Array.prototype.flatMap` を使わないと、まず `map` してから `flat` 関数を使ってフラットにします。
しかし、 `Array.prototype.flatMap` を使うと、一つの関数でフラットにできます。

```js
let arr1 = [1, 2, 3, 4];

const arr2 = arr1.map(x => [x * 2]).flat(); 
// [2, 4, 6, 8]

const arr3 = arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
```

参考：[Array.prototype.flatMap](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

## optional catch binding

バインディングが使用されない場合にキャッチバインディングを省略できる、というものです。
つまり、try-catchは通常次のようになりますが、

```js
try {
} catch(e) {
}
```

バインディングを使用しない場合は、記述を省略できるという文法の変更です。

```js
try {
} catch {
}
```

参考：[optional catch binding](https://github.com/tc39/proposal-optional-catch-binding)

## 終わりに
ES2019だけにフォーカスすれば量としてはそんなに多くなかったのですが、勉強していなかったES2016〜2018をまとめてインプットするのは中々ヘビーだなという印象です。次回はES2016にフォーカスして勉強してみようと思います。