This rule raises an issue when the forEach method is called on arrays, as for…​of loops provide better performance and more control flow options.

Why is this an issue?

The forEach method creates a function call for each array element, which introduces performance overhead compared to native for…​of loops. This overhead becomes more significant with larger arrays.

More importantly, forEach limits your control flow options. You cannot use break to exit early or continue to skip iterations, as these statements don’t work inside callback functions. This forces developers to use workarounds like throwing exceptions or complex conditional logic.

In TypeScript projects, forEach creates a function boundary that breaks type narrowing. Variables that were narrowed to specific types before the loop may lose their narrowed type inside the callback. Additionally, TypeScript’s analysis of variable mutations can be disrupted by the function boundary, potentially missing important usage patterns.

The for…​of loop syntax is also more readable and familiar to developers coming from other programming languages, making the code easier to understand and maintain.

What is the potential impact?

Using forEach instead of for…​of can lead to:

• Performance degradation, especially with large arrays due to function call overhead
• Limited control flow capabilities, preventing early exits and iteration skipping
• Type safety issues in TypeScript where type narrowing is lost across function boundaries
• Reduced code maintainability due to less intuitive syntax for simple iterations

How to fix?

Replace simple forEach calls with for…​of loops. This provides better performance and maintains the same functionality.

Non-compliant code example

array.forEach(element => {
    console.log(element);
}); // Noncompliant

Compliant code example

for (const element of array) {
    console.log(element);
}

Documentation

• eslint-plugin-unicorn - Rule no-array-for-each
• MDN: for…​of statement - Complete guide to for…​of loops in JavaScript
• MDN: Array.prototype.forEach() - Documentation for the forEach method
• MDN: Array.prototype.entries() - How to get both index and value in iterations