Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】for await...of文の使い方

for await...of文の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

for await...of関数は、非同期イテラブルオブジェクトの要素を順次処理するためのループ構文として、非同期操作を待機しながら一連の処理を実行する関数です。これは、JavaScriptの非同期処理において、Promiseを返すイテラブルなオブジェクトや、非同期ジェネレーターが生成する値に対して使用される特別なループ構文です。通常のfor...ofループが同期的な反復処理を行うのに対し、for await...ofは非同期的な処理を、各要素の処理が完了するのを待機(awaitキーワードを使用)しながら順番に進めることができます。

この機能は、ネットワークからのストリームデータの読み込み、データベースからの結果セットの非同期的なフェッチ、あるいは一連の非同期タスクを順序立てて実行する場面などで特に有効です。ループの各反復でawaitを使用することで、次の要素の処理に進む前に現在の非同期操作が確実に完了し、非同期処理の順序性と制御を簡潔に記述できます。また、通常のループと同様にbreakcontinueといった制御フロー文も利用可能です。システムエンジニアにとって、複雑な非同期処理の流れを読みやすく、効率的に実装するための重要なツールとなります。

公式リファレンス: for await...of

構文(syntax)

1async function* myAsyncGenerator() {
2  yield 'Data 1';
3  await new Promise(resolve => setTimeout(resolve, 50));
4  yield 'Data 2';
5  await new Promise(resolve => setTimeout(resolve, 50));
6  yield 'Data 3';
7}
8
9(async () => {
10  for await (const item of myAsyncGenerator()) {
11    console.log(item);
12  }
13})();

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語