ES2017 モダンなJavaScriptの書き方【JavaScript Pro Tips 】

出典

JavaScript Pro Tips – Code This, NOT Thatという動画を見て勉強したことをメモします。
動画ではモダンなJavaScriptの書き方に関するTipsが紹介されています。

console.log

デバッガの Web コンソールにメッセージを出力するconsole.logを使うときの小技です。

good codeで示した方が、何のオブジェクトを出力しているのかを表示してくれるので視認性が良いですね。

console.table

console.tableを使うとtable形式で出力を見ることができます。これは知りませんでした。便利ですね。

console.trace

console.traceはスタックトレースを出力してくれます。


関数の定義や呼び出しが何行目で行われたかをトレースしてくれます。

function

関数の引数にオブジェクトを渡す際の書き方です。

引数にプロパティを指定しておいてオブジェクトを渡せばよいわけですね。

object

スプレッド構文...を活用してobjectの展開を行いましょう。

Array

配列への要素の挿入もスプレッド構文を使えば簡潔に書けます。

Loop

数値配列の合計値を求めたり、それぞれの要素に演算を行ったり(ここでは税込みの値を計算)、フィルターをかける(ここでは100以上の数字を抽出)にはfor文を使ったループ処理がよく使われます。
しかしreduce,map,filterメソッドを使うとこれらはもっと簡潔に書けます。

async/await

async/awaitを使えばPromiseの煩雑な構文から解放されます。
取得に2000ms(2秒)かかる乱数を3つ取得し、その合計値を出力するプログラムを考えます。

このようにawaitを利用すれば、then()で処理を繋げる必要なく、連続した非同期処理を書くことができます。しかしこれでは連続して処理を行うため2000×3=6000msの実行時間がかかってしまいます。
そこで並列の非同期処理の出番です。

2000msかかる乱数取得処理を並列化しているので実行時間も2000ms程度ですみます。