やりたいこと

関数A (重い)
↓
関数B (軽い)

同期処理を上から順に実行していたが、AとBに順序性はなくAは非同期でもいいと気づいた。

非同期の関数を作るとかではなく、いかにシンプルに非同期にできるかに重点を置いて考えてみた。

既存の処理例

main.js

// 重い処理
function heavy() {
  // ...
  console.log('heavy');
}

// 軽い処理
function light() {
  console.log('light');
}

// メイン
function main() {
  heavy();
  light();
}

// 実行
main();

実行結果は当たり前だが以下の通り

実行結果.

heavy
light

改善案

main.js

// 重い処理
function heavy() {
  // ...
  console.log('heavy');
}

// 軽い処理
function light() {
  console.log('light');
}

// メイン
function main() {
  Promise.resolve().then(heavy);
  light();
}

// 実行
main();

実行結果は以下の通り

実行結果.

light
heavy

改善案　重い処理に引数1つ

main.js

// 重い処理
function heavy(name) {
  // ...
  console.log('heavy:', name);
}

// 軽い処理
function light() {
  console.log('light');
}

// メイン
function main() {
  Promise.resolve("tanaka").then(heavy);
  light();
}

// 実行
main();

実行結果は以下の通り

実行結果.

light
heavy: tanaka

改善案　重い処理に引数複数

main.js

// 重い処理
function heavy(name, age) {
  // ...
  console.log('heavy:', name, age);
}

// 軽い処理
function light() {
  console.log('light');
}

// メイン
function main() {
  Promise.resolve(["tanaka", 20]).then(arg => heavy(...arg));
  light();
}

// 実行
main();

実行結果は以下の通り

実行結果.

light
heavy: tanaka 20

感想

もっといい方法、スマートな方法あれば教えてください。