Home / Topic Library / JavaScript / Loops
⚡ JavaScript Topic Library

JavaScript Loops — for, for...of, while & forEach

JavaScript has more loop styles than most languages. The good news: for modern code you mostly need two — for...of for items and the classic for for counting.

⚡ Quick Answer

for (const item of array) visits values — the modern default. Classic for (let i = 0; i < n; i++) when you need the index or step control. while (condition) repeats until false. break exits; continue skips ahead.

for...of — the modern defaultClassic for & whilebreak & continueforEach vs for...of (and the await trap)for...in — objects onlyCommon MistakesFAQ

§for...of — the modern default

for_of.js
const names = ["ada", "alan", "grace"];

for (const name of names) {
  console.log(name.toUpperCase());
}

for (const ch of "hi") console.log(ch);   // works on strings too

// need the index as well?
for (const [i, name] of names.entries()) {
  console.log(`${i + 1}. ${name}`);
}

§Classic for & while

classic.js
for (let i = 10; i > 0; i--) {
  console.log(i);              // countdown — full control
}

let tries = 0;
while (tries < 3) {
  console.log("attempt", ++tries);
}

do {
  // runs AT LEAST once, then checks
} while (false);

§break & continue

control.js
for (const n of [4, 9, 16, 25, 36]) {
  if (n > 20) break;          // stop the whole loop
  if (n % 2 !== 0) continue;  // skip odds
  console.log(n);             // 4 16
}

§forEach vs for...of (and the await trap)

foreach.js
const nums = [1, 2, 3];
nums.forEach((n, i) => console.log(i, n));  // fine for simple cases

// BUT: no break/continue, and await doesn't pause it:
// nums.forEach(async n => await save(n));   // fires all at once!

for (const n of nums) {
  await save(n);               // ✓ awaits one at a time
}

§for...in — objects only

for_in.js
const scores = { ada: 95, alan: 88 };
for (const key in scores) {
  console.log(key, scores[key]);
}
// cleaner modern version:
for (const [name, score] of Object.entries(scores)) {
  console.log(name, score);
}
// never use for...in on ARRAYS — keys come back as strings

§Common Mistakes to Avoid

🚨 Watch out for these
  • for...in on arrays — it iterates keys (as strings!) and inherited properties — use for...of for arrays
  • await inside forEach — forEach ignores promises — all iterations fire simultaneously; use for...of with await
  • Infinite while loops — if nothing in the body changes the condition, the tab freezes — ensure progress every iteration

§Frequently Asked Questions

What's the difference between for...of and for...in?

for...of gives values of an iterable (arrays, strings); for...in gives property KEYS of an object. Arrays want for...of.

Can I break out of forEach?

No — forEach can't break or continue. Use for...of, or .some()/.every() when a short-circuit is what you mean.

Which loop is fastest?

Differences are negligible in real apps — pick the most readable. Classic for wins micro-benchmarks; for...of wins maintainability.

How do I loop N times without an array?

for (let i = 0; i < N; i++) — or [...Array(N).keys()] if you need an iterable of 0..N-1.

🎓 Want to master JavaScript properly?This reference covers one topic — the full free course takes you from zero to real projects, with quizzes and a certificate.
Start the Free JavaScript Course →

§Related JavaScript Topics

📦 Variableslet, const, var & scope🏷️ Data TypesTypes, == vs ===, null & undefined🧰 FunctionsDeclarations, arrows & callbacks📋 Arraysmap, filter, reduce & friends🗂️ ObjectsProperties, destructuring & JSON🌳 DOM ManipulationSelect, change & create elements
← ObjectsDOM Manipulation →