Loops (for, while, do-while)

Introduction to Loops

Loops are fundamental control structures in programming that allow you to execute a block of code repeatedly based on a condition. They are essential for automating repetitive tasks, processing collections of data, and implementing complex algorithms.

JavaScript provides several types of loops, each with its own use cases:

• for loop: Repeats until a specified condition evaluates to false
• while loop: Executes as long as a specified condition is true
• do...while loop: Executes at least once and then repeats as long as a specified condition is true
• for...of loop: Iterates over iterable objects (arrays, strings, etc.)
• for...in loop: Iterates over properties of an object

Today, we'll focus on the core loop structures: for, while, and do-while loops.

The for Loop

The for loop is the most commonly used loop in JavaScript. It provides a concise way to write a loop with an initialization, condition, and update expression all in one line.

Basic Syntax

for (initialization; condition; update) {
    // Code to be executed in each iteration
}

How it Works

1. The initialization expression is executed once before the loop starts
2. The condition is evaluated before each iteration
3. If the condition is true, the loop body executes
4. After each execution of the loop body, the update expression is executed
5. The process repeats from step 2 until the condition becomes false

Simple Examples

// Basic for loop to count from 1 to 5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// Output: 1, 2, 3, 4, 5

// Loop through an array
const fruits = ['apple', 'banana', 'orange', 'grape'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Fruit at index ${i}: ${fruits[i]}`);
}

// Count down from 10 to 1
for (let i = 10; i >= 1; i--) {
    console.log(i);
}
// Output: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

// Skipping iterations (counting by 2s)
for (let i = 0; i <= 10; i += 2) {
    console.log(i);
}
// Output: 0, 2, 4, 6, 8, 10

Complex for Loop Examples

// Multiple initialization and update expressions
for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(`i = ${i}, j = ${j}`);
}
// Output: i = 0, j = 10
//         i = 1, j = 9
//         i = 2, j = 8
//         i = 3, j = 7
//         i = 4, j = 6

// Empty parts (infinite loop with break condition)
let count = 0;
for (;;) {
    if (count >= 5) {
        break; // Exit the loop when count reaches 5
    }
    console.log(count);
    count++;
}
// Output: 0, 1, 2, 3, 4

// Nested for loops (creating a multiplication table)
for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
    console.log('---'); // Separator between rows
}

// Calculate order total and print receipt
function processOrder(order) {
  console.log(`Order #${order.id} - ${order.date}`);
  console.log('-------------------------------');
  
  let subtotal = 0;
  let itemCount = 0;
  
  // Loop through each item in the order
  for (let i = 0; i < order.items.length; i++) {
    const item = order.items[i];
    const itemTotal = item.price * item.quantity;
    
    // Print item details
    console.log(`${item.name} x ${item.quantity}`);
    console.log(`$${item.price.toFixed(2)} each - $${itemTotal.toFixed(2)}`);
    
    // Update running totals
    subtotal += itemTotal;
    itemCount += item.quantity;
  }
  
  // Calculate tax and total
  const tax = subtotal * order.taxRate;
  const total = subtotal + tax;
  
  // Print order summary
  console.log('-------------------------------');
  console.log(`${itemCount} items - Subtotal: $${subtotal.toFixed(2)}`);
  console.log(`Tax (${(order.taxRate * 100).toFixed(2)}%): $${tax.toFixed(2)}`);
  console.log(`Total: $${total.toFixed(2)}`);
  console.log(`Payment Method: ${order.paymentMethod}`);
  console.log('-------------------------------');
  
  return {
    subtotal: subtotal,
    tax: tax,
    total: total
  };
}

// Sample order data
const order = {
  id: 12345,
  date: '2023-05-15',
  items: [
    { name: 'T-Shirt', price: 19.99, quantity: 2 },
    { name: 'Jeans', price: 49.95, quantity: 1 },
    { name: 'Socks', price: 7.99, quantity: 3 }
  ],
  taxRate: 0.07,
  paymentMethod: 'Credit Card'
};

// Process the order
processOrder(order);

The while Loop

The while loop executes a block of code as long as a specified condition evaluates to true. It's particularly useful when you don't know in advance how many times you need to loop.

Basic Syntax

while (condition) {
    // Code to be executed as long as the condition is true
}

How it Works

1. The condition is evaluated
2. If the condition is true, the loop body executes
3. After executing the loop body, the condition is evaluated again
4. This process repeats until the condition becomes false
5. If the condition is false initially, the loop body never executes

Simple Examples

// Basic while loop
let count = 1;
while (count <= 5) {
    console.log(count);
    count++;
}
// Output: 1, 2, 3, 4, 5

// Looping until a condition is met
let dice = 0;
while (dice !== 6) {
    // Simulate rolling a dice (random number 1-6)
    dice = Math.floor(Math.random() * 6) + 1;
    console.log(`You rolled a ${dice}`);
}
console.log("You finally rolled a 6!");

// Looping through an array
const fruits = ['apple', 'banana', 'orange', 'grape'];
let index = 0;
while (index < fruits.length) {
    console.log(fruits[index]);
    index++;
}

// Be careful of infinite loops!
// This would run forever if not for the break
let x = 0;
while (true) {
    console.log(x);
    x++;
    if (x >= 5) {
        break; // Exit the loop
    }
}

// Simulating a login system with retry logic
function userLogin() {
  // Set maximum attempts
  const MAX_ATTEMPTS = 3;
  let attempts = 0;
  let loggedIn = false;
  
  while (attempts < MAX_ATTEMPTS && !loggedIn) {
    // Simulate getting user input (in a real app, this would be from a form)
    const username = getUserInput("Enter username:");
    const password = getUserInput("Enter password:");
    
    // Check credentials (simplified)
    if (isValidCredentials(username, password)) {
      loggedIn = true;
      console.log("Login successful!");
    } else {
      attempts++;
      const remainingAttempts = MAX_ATTEMPTS - attempts;
      
      if (remainingAttempts > 0) {
        console.log(`Invalid credentials. ${remainingAttempts} attempts remaining.`);
      } else {
        console.log("Login failed. Account locked for security.");
      }
    }
  }
  
  return loggedIn;
}

// Simulated helper functions
function getUserInput(prompt) {
  // In a real app, this would get actual user input
  console.log(prompt);
  
  // For this example, return hardcoded values
  if (prompt.includes("username")) {
    return "test_user";
  } else {
    // Change to "correct_password" after a couple attempts to simulate eventual success
    const simulatedAttempts = Math.floor(Math.random() * 3);
    return simulatedAttempts > 1 ? "correct_password" : "wrong_password";
  }
}

function isValidCredentials(username, password) {
  // In reality, this would check against a database or authentication service
  return username === "test_user" && password === "correct_password";
}

// Try to log in
userLogin();

The do...while Loop

The do...while loop is similar to the while loop, with one key difference: it always executes the code block at least once before checking the condition.

Basic Syntax

do {
    // Code to be executed at least once and then as long as the condition is true
} while (condition);

How it Works

1. The loop body executes once
2. After executing the loop body, the condition is evaluated
3. If the condition is true, the loop body executes again
4. This process repeats until the condition becomes false
5. Even if the condition is false initially, the loop body executes exactly once

Simple Examples

// Basic do...while loop
let count = 1;
do {
    console.log(count);
    count++;
} while (count <= 5);
// Output: 1, 2, 3, 4, 5

// Example with condition initially false
let x = 10;
do {
    console.log(`x is ${x}`);
    x++;
} while (x < 10);
// Output: "x is 10" (Loop runs once despite condition being false)

// Menu selection example
let selection;
do {
    selection = getUserMenuChoice();
    processMenuSelection(selection);
} while (selection !== 'quit');

// Helper functions for the menu example (simplified)
function getUserMenuChoice() {
    // In a real app, this would get user input
    // Here we'll return random choices for demonstration
    const choices = ['view', 'edit', 'delete', 'quit'];
    return choices[Math.floor(Math.random() * choices.length)];
}

function processMenuSelection(choice) {
    console.log(`Processing selection: ${choice}`);
}

// Password strength checker
function getSecurePassword() {
  let password;
  let isStrong;
  
  do {
    // Get password input (simulated for this example)
    password = getPasswordInput();
    
    // Check password strength
    const strengthResult = checkPasswordStrength(password);
    isStrong = strengthResult.isStrong;
    
    // Provide feedback if password is weak
    if (!isStrong) {
      console.log("Your password is too weak. " + strengthResult.feedback);
      console.log("Please try again with a stronger password.");
    }
  } while (!isStrong);
  
  console.log("Password accepted!");
  return password;
}

// Helper functions (simplified)
function getPasswordInput() {
  // In a real app, this would get actual user input
  console.log("Enter a password:");
  
  // Return progressively stronger passwords to simulate user attempts
  static let attempt = 0;
  attempt++;
  
  switch (attempt) {
    case 1: return "password123"; // Too simple
    case 2: return "myBirthday1990"; // Better but not great
    case 3: return "C0mpl3x!P@ssw0rd"; // Strong password
    default: return "C0mpl3x!P@ssw0rd"; // Strong password
  }
}

function checkPasswordStrength(password) {
  // Define strength criteria
  const hasMinLength = password.length >= 8;
  const hasUppercase = /[A-Z]/.test(password);
  const hasLowercase = /[a-z]/.test(password);
  const hasNumbers = /[0-9]/.test(password);
  const hasSpecialChars = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
  
  // Count how many criteria are met
  const criteriaCount = [
    hasMinLength, hasUppercase, hasLowercase, hasNumbers, hasSpecialChars
  ].filter(Boolean).length;
  
  // Generate feedback
  let feedback = "Your password should have:";
  if (!hasMinLength) feedback += " at least 8 characters;";
  if (!hasUppercase) feedback += " uppercase letters;";
  if (!hasLowercase) feedback += " lowercase letters;";
  if (!hasNumbers) feedback += " numbers;";
  if (!hasSpecialChars) feedback += " special characters;";
  
  // Determine if the password is strong enough
  const isStrong = criteriaCount >= 4;
  
  return {
    isStrong,
    feedback
  };
}

// Get a secure password
getSecurePassword();

Loop Control: break and continue

JavaScript provides two special statements to control the flow of loops: break and continue.

The break Statement

The break statement terminates the current loop and transfers control to the statement following the loop.

// Using break to exit a loop early
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break; // Exit the loop when i is 5
    }
    console.log(i);
}
// Output: 1, 2, 3, 4

// Finding an element in an array
const numbers = [3, 7, 2, 9, 4, 8];
let found = false;
let index = -1;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === 9) {
        found = true;
        index = i;
        break; // Stop searching once found
    }
}

console.log(found ? `Found at index ${index}` : "Not found");

The continue Statement

The continue statement skips the rest of the current iteration and moves to the next iteration of the loop.

// Using continue to skip specific iterations
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue; // Skip even numbers
    }
    console.log(i);
}
// Output: 1, 3, 5, 7, 9

// Processing array items with a filter
const scores = [85, 93, 42, 78, 64, 95, 59];
const passedScores = [];

for (let i = 0; i < scores.length; i++) {
    if (scores[i] < 60) {
        continue; // Skip failing scores
    }
    passedScores.push(scores[i]);
}

console.log("Passing scores:", passedScores);

// Process customer data for marketing campaign
function filterCustomersForCampaign(customers, campaignType) {
  console.log(`Filtering customers for ${campaignType} campaign...`);
  
  const eligibleCustomers = [];
  const totalCustomers = customers.length;
  let processedCount = 0;
  
  for (let i = 0; i < customers.length; i++) {
    const customer = customers[i];
    
    // Skip customers who have opted out of marketing
    if (customer.marketingOptOut) {
      console.log(`Skipping ${customer.name} - opted out of marketing`);
      continue;
    }
    
    // Skip inactive customers
    if (!customer.isActive) {
      console.log(`Skipping ${customer.name} - inactive account`);
      continue;
    }
    
    // Process based on campaign type
    if (campaignType === 'premium_upgrade') {
      // For premium upgrades, only target customers with high engagement
      if (customer.engagementScore < 7) {
        continue;
      }
      
      // Skip customers who already have premium
      if (customer.accountType === 'premium') {
        continue;
      }
    }
    else if (campaignType === 'win_back') {
      // For win-back campaigns, target customers with declining activity
      if (customer.lastPurchaseDays < 60) {
        continue; // Skip recently active customers
      }
      
      // Stop processing if we've reached our target for win-back
      if (eligibleCustomers.length >= 100) {
        console.log(`Reached target of 100 customers for win-back campaign`);
        break;
      }
    }
    else if (campaignType === 'new_product') {
      // For new product campaigns, target customers with matching interests
      if (!customer.interests.includes('technology')) {
        continue;
      }
    }
    
    // If we get here, the customer is eligible
    eligibleCustomers.push({
      id: customer.id,
      name: customer.name,
      email: customer.email,
      phone: customer.phone
    });
    
    processedCount++;
  }
  
  console.log(`Processed ${processedCount} of ${totalCustomers} customers`);
  console.log(`Found ${eligibleCustomers.length} eligible customers for ${campaignType} campaign`);
  
  return eligibleCustomers;
}

// Sample customer data
const customers = [
  { id: 1, name: "Alice Johnson", email: "alice@example.com", phone: "555-1234", 
    isActive: true, marketingOptOut: false, accountType: "basic", 
    engagementScore: 8, lastPurchaseDays: 15, interests: ["technology", "books"] },
  
  { id: 2, name: "Bob Smith", email: "bob@example.com", phone: "555-5678", 
    isActive: true, marketingOptOut: true, accountType: "premium", 
    engagementScore: 9, lastPurchaseDays: 5, interests: ["sports", "travel"] },
  
  { id: 3, name: "Charlie Davis", email: "charlie@example.com", phone: "555-9012", 
    isActive: false, marketingOptOut: false, accountType: "basic", 
    engagementScore: 3, lastPurchaseDays: 120, interests: ["music", "art"] },
  
  { id: 4, name: "Diana Wilson", email: "diana@example.com", phone: "555-3456", 
    isActive: true, marketingOptOut: false, accountType: "basic", 
    engagementScore: 9, lastPurchaseDays: 30, interests: ["technology", "fashion"] }
];

// Test the function with different campaign types
const premiumCandidates = filterCustomersForCampaign(customers, 'premium_upgrade');
console.log(premiumCandidates);

const winBackCandidates = filterCustomersForCampaign(customers, 'win_back');
console.log(winBackCandidates);

const newProductCandidates = filterCustomersForCampaign(customers, 'new_product');
console.log(newProductCandidates);

Labeled Statements

JavaScript allows you to label statements, which can be useful with break and continue in nested loops.

Basic Syntax

labelName: statement

Breaking Out of Nested Loops

// Breaking out of a nested loop
outerLoop: for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`i = ${i}, j = ${j}`);
        
        if (i === 2 && j === 2) {
            console.log('Breaking out of both loops');
            break outerLoop; // Breaks out of the outer loop
        }
    }
}

// Compare with regular break (only breaks inner loop)
for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`i = ${i}, j = ${j}`);
        
        if (i === 2 && j === 2) {
            console.log('Breaking out of inner loop only');
            break; // Only breaks out of the inner loop
        }
    }
}

Continuing to the Next Iteration of an Outer Loop

// Continue to the next iteration of an outer loop
outerLoop: for (let i = 1; i <= 3; i++) {
    console.log(`Outer loop: i = ${i}`);
    
    for (let j = 1; j <= 3; j++) {
        if (j === 2) {
            console.log(`Skipping to next iteration of outer loop`);
            continue outerLoop; // Skip to next iteration of outer loop
        }
        
        console.log(`Inner loop: j = ${j}`);
    }
}

// Find a value in a 2D matrix and exit both loops when found
function findInMatrix(matrix, target) {
  // Keep track of whether we found the target
  let found = false;
  // Store the position where we found the target
  let position = { row: -1, col: -1 };
  
  matrixSearch: for (let i = 0; i < matrix.length; i++) {
    const row = matrix[i];
    
    for (let j = 0; j < row.length; j++) {
      if (row[j] === target) {
        // Found the target!
        found = true;
        position.row = i;
        position.col = j;
        
        // Break out of both loops
        break matrixSearch;
      }
    }
  }
  
  if (found) {
    return `Found ${target} at position [${position.row}, ${position.col}]`;
  } else {
    return `${target} not found in the matrix`;
  }
}

// Example matrix
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(findInMatrix(matrix, 5)); // Found 5 at position [1, 1]
console.log(findInMatrix(matrix, 10)); // 10 not found in the matrix

Common Loop Patterns

Let's explore some common patterns and techniques for working with loops in JavaScript.

Iterating Through Arrays

// Basic array iteration
const colors = ['red', 'green', 'blue', 'yellow'];

// Using for loop with index
for (let i = 0; i < colors.length; i++) {
    console.log(`Color ${i + 1}: ${colors[i]}`);
}

// Iterating in reverse order
for (let i = colors.length - 1; i >= 0; i--) {
    console.log(`Color from the end ${colors.length - i}: ${colors[i]}`);
}

// Using for...of loop (simpler syntax for arrays)
for (const color of colors) {
    console.log(`Color: ${color}`);
}

Filtering and Transforming

// Filtering values from an array
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// Transforming array values
const squared = [];
for (let i = 0; i < numbers.length; i++) {
    squared.push(numbers[i] * numbers[i]);
}
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

Accumulating Results

// Sum of all numbers
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(`Sum: ${sum}`); // 55

// Product of all numbers
let product = 1;
for (let i = 0; i < numbers.length; i++) {
    product *= numbers[i];
}
console.log(`Product: ${product}`); // 3628800

// Finding the maximum value
let max = numbers[0]; // Start with the first value
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}
console.log(`Maximum: ${max}`); // 10

Nested Loops for Multi-dimensional Arrays

// Process a 2D grid (matrix)
const grid = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Print all values
for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
        console.log(`Grid[${i}][${j}] = ${grid[i][j]}`);
    }
}

// Calculate the sum of all values
let gridSum = 0;
for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
        gridSum += grid[i][j];
    }
}
console.log(`Sum of all values: ${gridSum}`); // 45

Dynamic Loop Control

// Changing the loop counter within the loop
for (let i = 0; i < 10; i++) {
    console.log(`Current i: ${i}`);
    
    if (i === 3) {
        i += 2; // Skip the next two iterations
        console.log(`Skipped to i: ${i}`);
    }
}

// Loops with variable endpoints
function findSequenceEnd(sequence, startIndex) {
    let endIndex = startIndex;
    
    while (endIndex < sequence.length) {
        if (sequence[endIndex] === 0) {
            break; // Found the end marker
        }
        endIndex++;
    }
    
    return endIndex;
}

const data = [1, 5, 3, 8, 2, 0, 7, 4, 6, 0];
console.log(findSequenceEnd(data, 0)); // 5
console.log(findSequenceEnd(data, 6)); // 9

// Process CSV data (simulated)
function parseCSV(csvText) {
  // Split the text into lines
  const lines = csvText.trim().split('\n');
  
  // Extract headers from the first line
  const headers = lines[0].split(',');
  
  // Process each data row
  const results = [];
  
  for (let i = 1; i < lines.length; i++) {
    // Skip empty lines
    if (!lines[i].trim()) {
      continue;
    }
    
    // Split the line into values
    const values = lines[i].split(',');
    
    // Create an object for this row
    const rowData = {};
    
    // Map each value to its corresponding header
    for (let j = 0; j < headers.length; j++) {
      const header = headers[j].trim();
      let value = values[j] ? values[j].trim() : '';
      
      // Try to convert numeric values
      if (!isNaN(value) && value !== '') {
        value = parseFloat(value);
      }
      
      rowData[header] = value;
    }
    
    // Add the row object to our results
    results.push(rowData);
  }
  
  return results;
}

// Calculate statistics from parsed data
function analyzeSalesData(salesData) {
  // Initialize statistics
  let totalSales = 0;
  let totalOrders = salesData.length;
  let minSale = salesData[0].amount;
  let maxSale = salesData[0].amount;
  let productCounts = {};
  
  // Process each sale
  for (let i = 0; i < salesData.length; i++) {
    const sale = salesData[i];
    
    // Update total sales
    totalSales += sale.amount;
    
    // Update min and max
    if (sale.amount < minSale) {
      minSale = sale.amount;
    }
    if (sale.amount > maxSale) {
      maxSale = sale.amount;
    }
    
    // Count products
    if (productCounts[sale.product]) {
      productCounts[sale.product]++;
    } else {
      productCounts[sale.product] = 1;
    }
  }
  
  // Calculate average sale
  const averageSale = totalSales / totalOrders;
  
  // Find the most popular product
  let mostPopularProduct = '';
  let highestCount = 0;
  
  for (const product in productCounts) {
    if (productCounts[product] > highestCount) {
      mostPopularProduct = product;
      highestCount = productCounts[product];
    }
  }
  
  // Return the analysis
  return {
    totalSales,
    totalOrders,
    averageSale,
    minSale,
    maxSale,
    mostPopularProduct,
    productCounts
  };
}

// Sample CSV data
const csvData = `date,product,customer,amount
2023-01-15,Laptop,John Smith,1299.99
2023-01-16,Mouse,Jane Doe,24.99
2023-01-16,Keyboard,Bob Johnson,89.99
2023-01-17,Monitor,Alice Brown,349.99
2023-01-18,Laptop,Sam Wilson,1499.99
2023-01-19,Mouse,Lisa Evans,19.99
2023-01-20,Keyboard,Mike Davis,79.99
`;

// Process the data
const salesData = parseCSV(csvData);
console.log("Parsed Sales Data:", salesData);

// Analyze the data
const analysis = analyzeSalesData(salesData);
console.log("Sales Analysis:", analysis);

Performance Considerations

When working with loops, it's important to consider performance, especially for large data sets or intensive operations.

Loop Optimization Techniques

1. Caching array length: Prevent recalculating length on each iteration
2. Avoiding unnecessary work inside loops: Move operations outside when possible
3. Using appropriate loop types: Choose the most efficient loop for your task
4. Breaking early: Exit as soon as you've found what you need
5. Reducing DOM operations: Minimize manipulations inside loops

Caching Array Length

// Slow: Length calculated on each iteration
for (let i = 0; i < array.length; i++) {
    // Do something
}

// Better: Cache the length
const len = array.length;
for (let i = 0; i < len; i++) {
    // Do something
}

Avoiding Unnecessary Operations

// Slow: Function call on each iteration
for (let i = 0; i < array.length; i++) {
    const transformed = expensiveTransform(array[i]);
    if (transformed > 10) {
        // Do something
    }
}

// Better: Only call expensive function when needed
for (let i = 0; i < array.length; i++) {
    if (array[i] > 5) { // Cheap initial check
        const transformed = expensiveTransform(array[i]);
        if (transformed > 10) {
            // Do something
        }
    }
}

Choosing the Right Loop

// Comparing different loop types
function measureLoopPerformance() {
    const arr = new Array(10000000).fill(1);
    
    console.time('for loop');
    let sum1 = 0;
    for (let i = 0; i < arr.length; i++) {
        sum1 += arr[i];
    }
    console.timeEnd('for loop');
    
    console.time('for...of loop');
    let sum2 = 0;
    for (const item of arr) {
        sum2 += item;
    }
    console.timeEnd('for...of loop');
    
    console.time('forEach method');
    let sum3 = 0;
    arr.forEach(item => {
        sum3 += item;
    });
    console.timeEnd('forEach method');
    
    console.time('reduce method');
    const sum4 = arr.reduce((acc, val) => acc + val, 0);
    console.timeEnd('reduce method');
    
    console.log({ sum1, sum2, sum3, sum4 });
}

// Run the performance test (results will vary by browser and computer)
// measureLoopPerformance();

Reducing DOM Operations

// Slow: DOM updates inside loop
for (let i = 0; i < items.length; i++) {
    document.getElementById('result').innerHTML += `
${items[i]}
`;
}

// Better: Build string and update DOM once
let html = '';
for (let i = 0; i < items.length; i++) {
    html += `
${items[i]}
`;
}
document.getElementById('result').innerHTML = html;

// Process a large dataset efficiently
function processLargeDataset(data, threshold) {
  // Early validation
  if (!data || !Array.isArray(data) || data.length === 0) {
    return {
      processed: 0,
      results: []
    };
  }
  
  // Initialize variables outside the loop
  const results = [];
  const len = data.length;
  let processed = 0;
  
  // Pre-calculate expensive values if they'll be used multiple times
  const calculatedThreshold = threshold * 1.5;
  
  // Process in batches for very large datasets
  const BATCH_SIZE = 1000;
  
  // Process each batch
  for (let start = 0; start < len; start += BATCH_SIZE) {
    // Process this batch
    const end = Math.min(start + BATCH_SIZE, len);
    
    for (let i = start; i < end; i++) {
      const item = data[i];
      
      // Skip invalid items early
      if (!item || typeof item !== 'object') {
        continue;
      }
      
      // Apply quick filters first
      if (item.value < threshold) {
        continue; // Skip items below threshold
      }
      
      // Only do expensive calculations when necessary
      if (item.value > calculatedThreshold || item.priority === 'high') {
        // Process the item (simulated expensive operation)
        const processedItem = {
          id: item.id,
          value: item.value,
          score: item.value * (item.weight || 1),
          priority: item.priority || 'normal'
        };
        
        // Add to results
        results.push(processedItem);
      }
      
      processed++;
    }
  }
  
  return {
    processed,
    results
  };
}

// Generate test data
function generateTestData(size) {
  const data = [];
  for (let i = 0; i < size; i++) {
    data.push({
      id: i,
      value: Math.random() * 100,
      weight: Math.random() + 0.5,
      priority: Math.random() > 0.8 ? 'high' : 'normal'
    });
  }
  return data;
}

// Compare optimized vs naive implementation
function comparePerformance() {
  const testData = generateTestData(100000);
  const threshold = 50;
  
  console.time('Optimized Implementation');
  const optimizedResult = processLargeDataset(testData, threshold);
  console.timeEnd('Optimized Implementation');
  console.log(`Optimized: Processed ${optimizedResult.processed} items, found ${optimizedResult.results.length} results`);
  
  console.time('Naive Implementation');
  const naiveResult = {
    processed: 0,
    results: []
  };
  
  // Naive implementation with no optimizations
  for (let i = 0; i < testData.length; i++) {
    naiveResult.processed++;
    
    if (testData[i].value >= threshold || testData[i].priority === 'high') {
      naiveResult.results.push({
        id: testData[i].id,
        value: testData[i].value,
        score: testData[i].value * (testData[i].weight || 1),
        priority: testData[i].priority || 'normal'
      });
    }
  }
  
  console.timeEnd('Naive Implementation');
  console.log(`Naive: Processed ${naiveResult.processed} items, found ${naiveResult.results.length} results`);
}

// Run performance comparison
// comparePerformance();

Practical Exercise

Let's practice using loops with these exercises.

Exercise 1: FizzBuzz

Implement the classic FizzBuzz exercise with a for loop:

// FizzBuzz exercise
function fizzBuzz(n) {
  const results = [];
  
  for (let i = 1; i <= n; i++) {
    // Check divisibility
    const isDivisibleBy3 = i % 3 === 0;
    const isDivisibleBy5 = i % 5 === 0;
    
    // Determine output based on divisibility
    if (isDivisibleBy3 && isDivisibleBy5) {
      results.push("FizzBuzz");
    } else if (isDivisibleBy3) {
      results.push("Fizz");
    } else if (isDivisibleBy5) {
      results.push("Buzz");
    } else {
      results.push(i.toString());
    }
  }
  
  return results;
}

// Test FizzBuzz
console.log(fizzBuzz(15));
// Output: ['1', '2', 'Fizz', '4', 'Buzz', 'Fizz', '7', '8', 'Fizz', 'Buzz', '11', 'Fizz', '13', '14', 'FizzBuzz']

Exercise 2: Pattern Printing

Use nested loops to print patterns:

// Print a star pyramid
function printStarPyramid(height) {
  for (let i = 1; i <= height; i++) {
    // Calculate spaces and stars
    const spaces = ' '.repeat(height - i);
    const stars = '*'.repeat(2 * i - 1);
    
    // Print this row
    console.log(spaces + stars);
  }
}

// Test the pyramid function
printStarPyramid(5);
/*
    *
   ***
  *****
 *******
*********
*/

// Print a number pattern
function printNumberPattern(size) {
  for (let i = 1; i <= size; i++) {
    let row = '';
    
    for (let j = 1; j <= i; j++) {
      row += j + ' ';
    }
    
    console.log(row);
  }
}

// Test the number pattern
printNumberPattern(5);
/*
1 
1 2 
1 2 3 
1 2 3 4 
1 2 3 4 5 
*/

Exercise 3: Array Analysis

Create functions to analyze arrays using loops:

// Array analysis functions
// Calculate the average of numbers in an array
function calculateAverage(numbers) {
  if (!numbers || numbers.length === 0) {
    return 0;
  }
  
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  
  return sum / numbers.length;
}

// Find the most frequent element in an array
function findMostFrequent(array) {
  if (!array || array.length === 0) {
    return null;
  }
  
  const frequency = {};
  let maxFrequency = 0;
  let mostFrequentElement;
  
  for (let i = 0; i < array.length; i++) {
    const element = array[i];
    
    // Increment frequency
    frequency[element] = (frequency[element] || 0) + 1;
    
    // Update most frequent if needed
    if (frequency[element] > maxFrequency) {
      maxFrequency = frequency[element];
      mostFrequentElement = element;
    }
  }
  
  return {
    element: mostFrequentElement,
    frequency: maxFrequency
  };
}

// Check if an array is sorted (ascending)
function isSorted(array) {
  if (!array || array.length <= 1) {
    return true; // Empty or single-element arrays are considered sorted
  }
  
  for (let i = 1; i < array.length; i++) {
    if (array[i] < array[i - 1]) {
      return false; // Found an element out of order
    }
  }
  
  return true;
}

// Test the functions
console.log(calculateAverage([5, 10, 15, 20, 25])); // 15
console.log(findMostFrequent([1, 2, 3, 2, 2, 3, 4, 2])); // { element: 2, frequency: 4 }
console.log(isSorted([1, 2, 3, 4, 5])); // true
console.log(isSorted([1, 3, 2, 4, 5])); // false

Exercise 4: Advanced Challenge - Matrix Operations

Implement matrix operations using nested loops:

// Matrix operations
// Add two matrices
function addMatrices(matrixA, matrixB) {
  // Validate that matrices have the same dimensions
  if (!matrixA || !matrixB || matrixA.length !== matrixB.length) {
    return null;
  }
  
  const result = [];
  
  for (let i = 0; i < matrixA.length; i++) {
    // Check that rows have the same length
    if (matrixA[i].length !== matrixB[i].length) {
      return null;
    }
    
    // Create a new row for the result
    const resultRow = [];
    
    for (let j = 0; j < matrixA[i].length; j++) {
      resultRow.push(matrixA[i][j] + matrixB[i][j]);
    }
    
    result.push(resultRow);
  }
  
  return result;
}

// Multiply two matrices
function multiplyMatrices(matrixA, matrixB) {
  // Validate input matrices
  if (!matrixA || !matrixB) {
    return null;
  }
  
  // For matrix multiplication, the number of columns in A must equal the number of rows in B
  const aRows = matrixA.length;
  const aCols = matrixA[0].length;
  const bRows = matrixB.length;
  const bCols = matrixB[0].length;
  
  if (aCols !== bRows) {
    return null; // Cannot multiply these matrices
  }
  
  // Initialize result matrix with zeros
  const result = [];
  for (let i = 0; i < aRows; i++) {
    result[i] = new Array(bCols).fill(0);
  }
  
  // Perform matrix multiplication
  for (let i = 0; i < aRows; i++) {
    for (let j = 0; j < bCols; j++) {
      for (let k = 0; k < aCols; k++) {
        result[i][j] += matrixA[i][k] * matrixB[k][j];
      }
    }
  }
  
  return result;
}

// Transpose a matrix
function transposeMatrix(matrix) {
  if (!matrix || matrix.length === 0) {
    return null;
  }
  
  const rows = matrix.length;
  const cols = matrix[0].length;
  
  // Initialize result matrix
  const result = [];
  for (let i = 0; i < cols; i++) {
    result[i] = new Array(rows);
  }
  
  // Fill in the transposed values
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      result[j][i] = matrix[i][j];
    }
  }
  
  return result;
}

// Calculate the determinant of a 2x2 matrix
function determinant2x2(matrix) {
  return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
}

// Test the functions
const matrixA = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const matrixB = [
  [9, 8, 7],
  [6, 5, 4],
  [3, 2, 1]
];

console.log("Matrix Addition:");
console.log(addMatrices(matrixA, matrixB));

console.log("Matrix Multiplication:");
console.log(multiplyMatrices(matrixA, matrixB));

console.log("Matrix Transposition:");
console.log(transposeMatrix(matrixA));

const matrix2x2 = [
  [4, 7],
  [2, 6]
];
console.log("2x2 Determinant:", determinant2x2(matrix2x2)); // 4*6 - 7*2 = 24 - 14 = 10

Key Takeaways

• Loops are essential control structures for executing code repeatedly based on conditions
• The for loop provides a concise syntax with initialization, condition, and update in one line
• The while loop executes as long as a condition is true, ideal when the number of iterations is unknown
• The do...while loop always executes at least once before checking the condition
• Loop control statements break and continue alter the normal flow of iterations
• Labeled statements allow precise control in nested loops
• Common loop patterns include array manipulation, accumulating results, and nested iterations
• Performance considerations are important, especially for large datasets or intensive operations
• Choosing the right loop for the task improves both code readability and efficiency

Additional Resources

• MDN: Loops and Iteration
• MDN: for Statement
• MDN: while Statement
• MDN: do...while Statement
• MDN: break Statement
• MDN: continue Statement
• JavaScript.info: Loops: while and for
• JS Tips: Daily JavaScript Tips