2020.12.06

ざっくり ECMAScript 2017

ざっくりと ES2017 のおさらいをしたい人向け。オカタい説明は mdn さんあたりにおまかせするとして、ゆるっとざっくり気楽にサクッとコードベースでおさらい。ES2017 は 待望の? Async / Await が追加されたよ。

環境構築

  • MacOS High Sierra
  • ふる〜い MBP 使ってます
  • nvm, ndenv, nodebrew のどれでもいいので node が動く環境を用意
  • VSCode 使ってます。拡張はお好みで。
  • node.js のバージョンは v14.7.0
  • 適当なディレクトリを掘って、index.js を用意しています (ファイル名はお好みで)
  • 動作確認は $ node index.js って叩いてます

最小限で動かすだけならこれだけでおっけいです。ここらへんの準備も面倒ならば codepen だの JSFiddle だの REPL だのを使ってもおk

es2017

es2017 は以下のような機能が追加されている(参考 Wikipedia ECMAScript

非同期関数 (async/await)、SharedArrayBufferとAtomics、String.padStart/padEndObject.values/entries、Object.getOwnPropertyDescriptors、関数の引数における末尾のカンマ許容

async / await

asyncは 非同期関数を定義する時に使用するキーワード。以下のような特徴・仕様がある

  • async function 〜 で非同期関数を定義。
  • async () => {} のようにアロー関数の形式も。
  • async function には await を含める事ができる (mustでないと成立しないわけではない)
  • async function の戻り値は 暗黙的に Promise ( resolve or reject ) で返す
  • (引用 mdn ) 非同期関数の戻り値は 「Promise で、非同期関数から返される値で解決するか、または非同期関数内の捕捉されなかった例外で拒否します。
  • async/await は結局 Promise の糖衣構文

await は async function により Promise が返ってくるまで待ってくれる演算子。んー。なんかこの表現気持ち悪いな。

とりあえず Promise での簡単な例

上記のコードを async / await で書き直すと以下のようになる

async/await での例外処理

Promise での例外は「catch( ) ハンドラー」もしくは「onRjected」を探していました。async/await では、同期処理で実装していた try-catch 的な方法で例外を補足できるよ。下記は mdn 掲載の例です

ってことで例。fnで例外を起こしてるよ。catch( ) で補足してる

setTimeout( ) と絡めた時の例外処理。今の所次のコードで済ませてる(setTimeout 内の try-catch のアレ感

String.padStart/padEnd

対象の文字列を、文字列を指定した桁数(文字数)分、指定した文字で埋める。

以下、mdn のサンプルをわかりやすく(醜く)したもの

Object.values/entries

Object.values はオブジェクトが持つプロパティの値を配列に、Object.entriesはオブジェクトを Key, Value を配列化した配列に( array in array )するよ

関数の引数における末尾のカンマ許容

配列やオブジェクトの末尾のカンマは許容されていたけど、関数の引数も許容された。