JavaScriptのforEachで同期的にawaitが使えない問題の対処法

こんにちは。ゲームを作って学ぶプログラミング学習サービスプロアカを開発しているアカネヤです。

JavaScriptのforEachでawaitが使えない問題とは、次のような問題です。

const arr = [1, 2, 3];

arr.forEach(async (el)=>{
  await someFunction(el)
})

これは、someFunctionを同期的に3回呼び出そうとして書いたコードです。
しかし実際に実行すると分かるのですが、
someFunction(1)
someFunction(2)
someFunction(3)
はそれぞれの完了を待たずに一斉に呼び出されています。
これはforEachメソッドの性質ですので、どうすることもできません。

JavaScriptのforEachで同期的にawaitが使えない問題の対処法

for of文を使い、全体をasync関数でラッピングすることでこの問題は解決できます。

const arr = [1, 2, 3];
(async(){
  for(let el of arr){
    await someFunction(el)
  }
})()

終わりに

私が開発しているゲームを作って学ぶプログラミング学習サービスプロアカでは無料体験も行っています。ぜひご覧下さい。