経緯

forループ内で同期処理を行いたかったので調べてみたら for await...ofというものがあることを知りました。

結論

このように asyncのなかに for await...ofを書くことで forループ内で awaitを宣言できます。

// 対象の反復オブジェクトconsttargetArr=[1,2,3];// 実行する関数constsampleFunc=(value)=>{// asyncの効果は各functionブロックで切れるので逐一指定が必要returnnewPromise(resolve=>{// 2秒待ってから計算結果をresolveするsetTimeout(()=>{console.log('Calculating...');resolve(value*2);},2000);})}// for await...of文は必ずasyncの中で(async()=>{forawait(numoftargetArr){// 関数の実行結果を格納して表示constresult=awaitsampleFunc(num);console.log(result);}})();

for await...of とは

for await...of 文は非同期（と同期）の反復オブジェクトを繰り返して処理するループを作ります。対象の反復オブジェクトは、ビルトインの String、Array、配列様オブジェクト（ arguments、NodeList 等)、TypedArray、Map、Set、さらに、ユーザーが定義した非同期・同期の反復オブジェクトが含まれます。オブジェクトの各プロパティの値に対して実行されるステートメントを使用してカスタム反復フックを呼び出します。

簡単に言うと
反復オブジェクト（ArrayやObjectなど）の中で同期処理を行う事ができる文です。

ESLintでは非推奨

便利な構文ですが、ESLintでは設計思想的な意味で推奨されていません。

https://eslint.org/docs/rules/no-await-in-loop

Performing an operation on each element of an iterable is a common task. However, performing an await as part of each operation is an indication that the program is not taking full advantage of the parallelization benefits of async/await.
Usually, the code should be refactored to create all the promises at once, then get access to the results using Promise.all(). Otherwise, each successive operation will not start until the previous one has completed.
Concretely, the following function should be refactored as shown:

反復の各要素に対して操作を行うことは一般的な作業です。
しかしながら、各段階の操作で awaitを実行すると async/awaitによる並列化の利点を十分に活用できません。
一般にこのようなコードは、全てのプロミスを一度に作成し Promise.all()を用いて結果を得るようにするべきです。