Prefer for…of over the forEach method

💼 This rule is enabled in the ✅ recommended config.

🔧💡 This rule is automatically fixable by the --fix CLI option and manually fixable by editor suggestions.

Benefits of for…of statement over the forEach method can include:

• Faster
• Better readability
• Ability to exit early with break or return
• Ability to skip iterations with continue

Additionally, using for…of has great benefits if you are using TypeScript, because it does not cause a function boundary to be crossed. This means that type-narrowing earlier on in the current scope will work properly while inside of the loop (without having to re-type-narrow). Furthermore, any mutated variables inside of the loop will picked up on for the purposes of determining if a variable is being used.

Fail

array.forEach(element => {
	bar(element);
});

array?.forEach(element => {
	bar(element);
});

array.forEach((element, index) => {
	bar(element, index);
});

array.forEach((element, index, array) => {
	bar(element, index, array);
});

Pass

for (const element of array) {
	bar(element);
}

for (const [index, element] of array.entries()) {
	bar(element, index);
}

for (const [index, element] of array.entries()) {
	bar(element, index, array);
}