Lesson 8: JavaScript Looping

8.1 Introduction to Looping

Looping allows you to execute a block of code repeatedly until a specified condition is met. JavaScript provides several looping mechanisms:

8.2 The For Loop

The for loop is the most common looping structure in JavaScript. It consists of three parts:

for (initialization; condition; update) {
    // Code to execute each iteration
}

let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
document.write(`Sum of 1 to 10: ${sum}`); // Output: 55

8.3 For...In Loop

The for...in loop iterates over the properties of an object. It's useful for working with object properties.

for (let key in object) {
    // Code to execute for each property
}

const student = {
    name: 'John',
    age: 21,
    course: 'Computer Science'
};

for (let prop in student) {
    document.write(`${prop}: ${student[prop]}<br>`);
}
// Output:
// name: John
// age: 21
// course: Computer Science

8.4 While Loop

The while loop executes a block of code as long as a specified condition is true.

while (condition) {
    // Code to execute
}

let count = 5;
while (count > 0) {
    document.write(`${count}...<br>`);
    count--;
}
document.write("Liftoff!");

8.5 Do...While Loop

The do...while loop is similar to the while loop but guarantees at least one execution of the loop body.

do {
    // Code to execute
} while (condition);

let userInput;
do {
    userInput = prompt("Enter a number greater than 100:");
} while (userInput <= 100);
document.write(`Thank you! You entered: ${userInput}`);

8.6 Loop Control Statements

JavaScript provides two important statements for controlling loop execution:

for (let i = 1; i <= 10; i++) {
    if (i === 5) continue; // Skip 5
    if (i === 8) break;    // Stop at 8
    document.write(i + "<br>");
}
// Output: 1, 2, 3, 4, 6, 7

8.7 Real-World Applications

Loops are fundamental to many programming tasks. Here are some practical examples:

Example 8.6: Processing Arrays

const products = [
    { name: 'Laptop', price: 999 },
    { name: 'Phone', price: 699 },
    { name: 'Tablet', price: 399 }
];

// Calculate total price
let total = 0;
for (let i = 0; i < products.length; i++) {
    total += products[i].price;
}
document.write(`Total: $${total}`); // Output: Total: $2097

Example 8.7: Generating HTML Elements

const colors = ['red', 'green', 'blue', 'yellow'];
let html = '<div class="color-grid">';
for (let color of colors) {
    html += `<div style="background:${color}">${color}</div>`;
}
html += '</div>';
document.body.innerHTML += html;