JavaScript Loops — JavaScript Tutorial

Repeating Code

Loops allow you to execute code multiple times. They're essential for processing arrays and repeating tasks.

JavaScript has several types of loops: for, while, do-while, and for-of.

Example

// For Loop
for (let i = 0; i < 5; i++) {
  console.log('Count: ' + i);
}
// Output: Count: 0, 1, 2, 3, 4

// Looping Through Array
const fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// While Loop
let count = 0;
while (count < 5) {
  console.log('Count: ' + count);
  count++;
}

// Do-While Loop (executes at least once)
let num = 0;
do {
  console.log('Number: ' + num);
  num++;
} while (num < 5);

// For-Of Loop (modern way)
for (let fruit of fruits) {
  console.log(fruit);
}

// Break and Continue
for (let i = 0; i < 10; i++) {
  if (i === 5) break;      // Stop loop
  if (i === 2) continue;   // Skip iteration
  console.log(i);
}
// Output: 0, 1, 3, 4

for - Loop with counter
while - Loop while condition is true
do-while - Loop at least once
for-of - Loop through array values
break - Exit loop early
continue - Skip current iteration
Avoid infinite loops!

Try Loops

HTML

<div class="loop-demo">
  <h3>Multiplication Table</h3>
  <input type="number" id="tableNum" value="5" min="1" max="20">
  <button onclick="showTable()">Generate Table</button>
  <div id="tableOutput"></div>
  
  <hr style="margin: 20px 0;">
  
  <h3>Number Patterns</h3>
  <button onclick="showPatterns()">Show Patterns</button>
  <div id="patternOutput"></div>
</div>

CSS

.loop-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; width: 100px; }
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
#tableOutput, #patternOutput { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; font-family: monospace; }

JavaScript

function showTable() {
  const num = parseInt(document.getElementById('tableNum').value);
  const output = document.getElementById('tableOutput');
  let html = `<strong>Multiplication Table of ${num}:</strong><br><br>`;
  
  for (let i = 1; i <= 10; i++) {
    html += `${num} × ${i} = ${num * i}<br>`;
  }
  
  output.innerHTML = html;
}

function showPatterns() {
  const output = document.getElementById('patternOutput');
  let html = '<strong>Number Patterns:</strong><br><br>';
  
  // Pattern 1: Ascending
  html += 'Pattern 1 (Ascending):<br>';
  for (let i = 1; i <= 5; i++) {
    html += i + ' ';
  }
  html += '<br><br>';
  
  // Pattern 2: Descending
  html += 'Pattern 2 (Descending):<br>';
  for (let i = 5; i >= 1; i--) {
    html += i + ' ';
  }
  html += '<br><br>';
  
  // Pattern 3: Even numbers
  html += 'Pattern 3 (Even Numbers):<br>';
  for (let i = 0; i <= 10; i++) {
    if (i % 2 === 0) {
      html += i + ' ';
    }
  }
  html += '<br><br>';
  
  // Pattern 4: Triangle
  html += 'Pattern 4 (Triangle):<br>';
  for (let i = 1; i <= 5; i++) {
    for (let j = 1; j <= i; j++) {
      html += '★ ';
    }
    html += '<br>';
  }
  
  output.innerHTML = html;
}

Notes

Loops are powerful but can freeze your browser if you create an infinite loop. Always ensure your loop will end!