JavaScript Array Loops: Key Differences Between for and forEach

🔁 for loop

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

✅ Features:

• Flexible — you have full control over the loop counter (i).
• Can break or continue the loop.
• Can iterate forwards or backwards, or even skip steps.
• Can be used with any iterable or even non-array-like objects.

🔂 forEach loop

array.forEach((item, index) => {
  console.log(item);
});

✅ Features:

• Simpler syntax for iterating over arrays only.
• Automatically gives you the current item, index, and the full array.
• Cannot use break or continue — it always goes through the entire array.
• More readable for simple array operations.

⚖️ Comparison Table

Feature	for Loop	forEach Loop
Syntax Complexity	Slightly more verbose	Cleaner and shorter
Access to index	Yes	Yes
Access to item	Yes (array[i])	Yes (passed directly)
Can break/continue	✅ Yes	❌ No
Async/Await support	✅ Yes	❌ Not directly supported
Works with non-arrays	✅ Yes	❌ No (only with arrays)

✅ Use for when:

• You need to break early or skip iterations.
• You need more manual control.
• You want to await inside the loop (use for...of in that case).

✅ Use forEach when:

• You just want to perform an action on every item.
• You want clean and readable code.
• You don’t need to exit early or use await.

🔧 Example: Breaking loop

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

// Using for loop
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 3) break;
  console.log(arr[i]); // 1, 2
}

// Using forEach (will NOT break)
arr.forEach((num) => {
  if (num === 3) return; // Only skips this iteration, NOT breaks
  console.log(num); // Will still print all except 3
});