> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript 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
```javascript theme={"dark"}
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
```javascript theme={"dark"}
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);
}
}
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
