Why Should We Use for...of Instead of forEach?

When we work with arrays in JavaScript, we often find ourselves needing to iterate through their elements. There are multiple ways to achieve this, with two of the most commonly used methods being forEach() and for...of loops. While both can achieve similar results, there are several reasons why opting for for...of may be the better choice in certain situations. Let’s dig deeper into these two approaches and explore why for...of might be the preferred iteration method for developers.

1. Simplicity and Readability

At its core, the for...of loop was designed to be straightforward and easy to read. The syntax reflects its purpose directly, allowing developers to focus more on what they are iterating over rather than how to iterate. For example:

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
    console.log(number);
}

In contrast, forEach() requires a function callback, which can make your code less concise and potentially harder to follow, especially for those unfamiliar with the callback pattern:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
});

Using for...of tends to result in clearer code, making it easier for both you and others who may work on the code later.

2. Break and Continue Control

One of the significant advantages of for...of over forEach() is the ability to use control flow statements such as break, continue, and return. This can be particularly useful when you need to exit a loop or skip certain iterations based on a condition.

Here's how you might use break and continue with for...of:

for (const number of numbers) {
    if (number === 3) {
        break; // Exit loop if the number is 3
    }
    if (number % 2 === 0) {
        continue; // Skip even numbers
    }
    console.log(number); // Outputs odd numbers: 1 and 5 in this case
}

With forEach(), however, you cannot break out of the loop early or skip iterations in the same way. Attempting to do so will not yield the desired control over iteration, making forEach() less flexible for complex logic.

3. Works with async/await

As modern JavaScript embraces asynchronous programming, the ability to use async/await becomes crucial. for...of loops allow you to utilize these keywords seamlessly, which gives you the capability to handle asynchronous operations within a loop easily.

Consider the following example:

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function processNumbers(numbers) {
    for (const number of numbers) {
        await delay(1000); // Simulate async operation
        console.log(number);
    }
}

processNumbers([1, 2, 3, 4, 5]);

On the other hand, using forEach() with async code can lead to unintended behaviors since the forEach() method does not wait for promises to resolve. This could result in all operations firing off simultaneously rather than sequentially:

numbers.forEach(async (number) => {
    await delay(1000);
    console.log(number);
}); // All numbers will be printed after 1 second, not in sequence.

Conclusion

While both forEach() and for...of are valid for iterating over arrays in JavaScript, the for...of loop provides distinct advantages in terms of readability, control flow, and asynchronous compatibility. By choosing for...of in your code, you can create loops that are easier to understand, manage, and extend.

Ultimately, choosing the right iteration technique depends on the specific context of the task at hand. However, when performance, clarity, and control matter, for...of is often the way to go.