For-await-of Loop

The for-await-of statement creates a loop iterating over asynchronous iterable objects as well as synchronous iterables. It implicitly awaits the resolution of each yielded Promise before executing the loop block, ensuring sequential execution of asynchronous operations within the iteration.

Syntax

for await (variable of iterable) {
  // statement
}

• variable: Receives the resolved value of the current iteration. Can be declared using const, let, or var, or it can be an assignment target (e.g., a previously declared variable or a destructured object/array).
• iterable: An object that implements the [Symbol.asyncIterator]() method or the synchronous [Symbol.iterator]() method.

Execution Context

Because it utilizes the await keyword under the hood, a for-await-of loop can only be executed within an async function, an async generator function, or at the top level of a module (Top-Level Await).

Iteration Mechanics

1. Protocol Evaluation: The loop first checks if the iterable possesses a [Symbol.asyncIterator] method. If absent, it falls back to the synchronous [Symbol.iterator] method.
2. Promise Resolution: For each iteration, the loop calls the iterator’s next() method.
   • If the yielded value is a Promise, the loop pauses execution of the block until the Promise settles.
   • If the yielded value is not a Promise, it is implicitly wrapped in a resolved Promise (equivalent to Promise.resolve(value)).
3. Value Assignment: Once the Promise resolves, the resolved value is assigned to the variable, and the loop body executes.
4. Rejection Handling: If a yielded Promise rejects, the loop immediately terminates, and the rejection is thrown as an exception within the current scope. This can be intercepted using a standard try...catch block surrounding the loop.

Control Flow

• break: Immediately terminates the loop. If the iterator has a return() method (used for cleanup in generators), the for-await-of loop will automatically invoke it before exiting.
• continue: Bypasses the remaining statements in the current loop body and proceeds to request and await the next value from the iterator.

Technical Distinctions

• Sequential vs. Concurrent: for-await-of processes iterations sequentially. It will not request the next item from the iterator until the current item’s Promise has resolved and the loop body has finished executing.
• Standard for...of with Promises: If a standard for...of loop is used on an iterable containing Promises, it iterates synchronously, assigning the pending Promise objects directly to the variable. for-await-of unwraps these Promises, assigning the underlying resolved values to the variable.

Example of Mechanics

async function processAsyncIterable(asyncIterable) {
  try {
    for await (const resolvedValue of asyncIterable) {
      console.log(resolvedValue); // Executes only after the current Promise resolves
    }
  } catch (error) {
    // Catches any rejection from the yielded Promises
    console.error("Iteration terminated due to rejection:", error);
  }
}

Master JavaScript with Deep Grasping Methodology!

Learn More