JavaScript: JavaScript Loops

Last updated: 2026-10-13

Loops let your program repeat a block of code. Writing "Hello" 100 times by hand is silly — with a loop, you write it once. That's the power of loops.

Related Statements：for...of return while for

1. for Loop

The for loop is the most common choice when you know how many times to iterate:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>for Loop</title></head>
<body>
<div id="output"></div>
<script>
for (let i = 0; i < 5; i++) {
  document.getElementById('output').textContent += i + ' ';
}
</script>
</body>
</html>

The three parts:

1. let i = 0 — initialization, runs once
2. i < 5 — condition, checked before each iteration; continues only if true
3. i++ — update, runs after each iteration

▶ Example: Generating a List with Loops

2. while Loop

while checks the condition first, then executes — ideal when you don't know how many iterations you'll need:

<script>
let count = 0;
while (count < 3) {
  count++;
}
</script>

Common use cases: reading data until it runs out, waiting for a condition to become true.

3. do...while Loop

do...while executes once before checking the condition — it runs at least once:

<script>
let input;
do {
  input = prompt('Enter a positive number:');
} while (Number(input) <= 0);
</script>

The difference from while in one sentence: while might never execute, but do...while always runs at least once.

▶ Example: Comparing All Three Loops

4. for...of Loop

for...of is designed for iterating over iterable objects (arrays, strings, etc.) with the cleanest syntax:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>for...of</title></head>
<body>
<div id="output"></div>
<script>
let colors = ['Red', 'Green', 'Blue'];
let html = '';
for (let color of colors) {
  html += color + ' ';
}
document.getElementById('output').textContent = html;
</script>
</body>
</html>

Unlike for, for...of gives you the value, not the index. If you need the index, use a traditional for loop.

5. break and continue

• break — exits the entire loop immediately
• continue — skips the current iteration and moves to the next

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>break and continue</title></head>
<body>
<div id="output"></div>
<script>
// break: stop when target is found
let breakResult = '';
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  breakResult += i + ' ';
}

// continue: skip even numbers
let continueResult = '';
for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) continue;
  continueResult += i + ' ';
}

document.getElementById('output').innerHTML =
  '<strong>break result:</strong>' + breakResult + '<br>' +
  '<strong>continue result:</strong>' + continueResult;
</script>
</body>
</html>

▶ Example: break and continue in Action

6. Nested Loops

Loops can be nested inside other loops — most commonly used for working with 2D data (tables, grids):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Nested Loops</title></head>
<body>
<div id="output"></div>
<script>
let html = '';
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    html += `(${i}, ${j}) `;
  }
  html += '<br>';
}
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>

Nested loops multiply in cost — 10 outer × 10 inner = 100 iterations. Too many levels can severely slow things down; if there's an alternative, avoid deep nesting.

▶ Example: Multiplication Table

7. The Infinite Loop Trap

If a loop's condition is always true, your program will freeze — this is an infinite loop:

<script>
// ⚠️ Never do this!
// while (true) {
//   console.log('I can never stop!');
// }

// Common mistake: forgetting to update the condition
let i = 0;
// while (i < 5) {
//   console.log(i);
//   Forgot i++, so i is always 0 and the loop never ends
// }
</script>

Related Statements：for...of return while for

❓ FAQ

📖 Summary

• for is most common for known iteration counts; while for condition-driven; do...while runs at least once
• for...of is the cleanest way to iterate arrays — gives values, not indices
• break exits the entire loop; continue skips to the next iteration
• Nested loops multiply in iteration count — avoid going too deep
• Always ensure loop conditions will eventually become false to avoid infinite loops

📝 Exercises

1. Use a for loop to print all multiples of 3 between 1 and 100
2. Use nested loops to render an 8×8 checkerboard pattern (alternating black and white squares) on the page
3. Write a program that takes a positive integer as input and outputs its factorial (e.g., input 5 → 5×4×3×2×1 = 120)

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us