ES5をES6で書き換える講座

設問

下記コードをアロー関数、async await, Promise、テンプレートリテラルを使って同期的関数になおして

function delayConsole(ms) {
  setTimeout(function () {
    console.log(String(ms) + 'ms待ちました');
  }, ms);
}

答え

テンプレートリテラル

バッククオート（～)内で変数を使える。

// 問
console.log(String(ms) + 'ms待ちました');

// 答
console.log(`${ms}ms待ちました`);

アロー関数

• アロー関数は、コールバックor無名関数の拡張。
• 引数が一つなら()を省略
  • ただし、中身なし or 複数は省略不可
• 中身が1行なら、{} と return を省略できる
  • オブジェクトを返す時は、()で囲む

// 問
function delayConsole(ms) {
　・・・
}

// 答
const delayConsole = ms => {
　・・・
}

Promise

Promiseは、ある特定の処理が終わったら、引数に渡した関数の処理を実行することができる。
Promiseには、未解決、解決済み、拒否の3つの状態がある。
Promiseオブジェクトは、resolveとrejectを引数とする関数を引数とする。
resolveは、解決済みの際にreturnで返す。
rejectは、拒否した際にreturnで返す。
resolveで解決後は .then()で次の処理。
rejectで拒否した場合は.catch()で次の処理。
さらに.then()で繋げると、全ての場合で実行可能。

// 問
setTimeout(function () {
  console.log(String(ms) + 'ms待ちました');
}, ms);

// 答
new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve();
  }, ms);
}).then(() => {
  console.log(`${ms}ms待ちました`);
});

async / await

Promiseを利用した構文よりも、簡潔に非同期処理が書ける。

• asyncは非同期関数を定義する関数宣言
  • async functionは呼び出されるとPromiseを返す。
  • async functionが値をreturnした場合、Promiseは戻り値をresolveする。
• awaitは Promiseの結果が返されるまで待機する演算子

参考記事

• async/await 入門（JavaScript）

// 問
function delayConsole(ms) {
  setTimeout(function () {
    console.log(String(ms) + 'ms待ちました');
  }, ms);
}

// 答
const delayConsole2 = async ms => {
  await new Promise(resolve => setTimeout(resolve, ms))
  console.log(`${ms}ms待ちました`);
}