JavaScript Loops Explained — for, while, and forEach with Real Examples

// Imagine you're a barista making 5 coffees in a row.
// You don't write five separate instructions — you loop.

const totalCoffees = 5;

for (let coffeeNumber = 1; coffeeNumber <= totalCoffees; coffeeNumber++) {
  // This block runs once for each coffee
  // coffeeNumber starts at 1, goes up by 1 each time, stops after 5
  console.log(`Making coffee number ${coffeeNumber} of ${totalCoffees}`);
}

console.log("All coffees done! Time for a break.");

// ---
// Now let's loop through an actual array of items — a very common real-world use.
const studentNames = ["Alice", "Bob", "Carmen", "David"];

for (let index = 0; index < studentNames.length; index++) {
  // studentNames.length is 4, so index goes 0, 1, 2, 3
  // When index reaches 4, the condition (4 < 4) is FALSE, so the loop stops
  console.log(`Student ${index + 1}: ${studentNames[index]}`);
}

// Scenario: A vending machine keeps accepting coins until you've
// inserted enough money for a snack that costs 75 cents.

const snackPrice = 75; // in cents
let totalInserted = 0;  // start with no coins inserted
let coinCount = 0;      // track how many coins were put in

// The condition: keep looping while we haven't paid enough
while (totalInserted < snackPrice) {
  const coinValue = 25; // pretend every coin is a quarter (25 cents)
  totalInserted += coinValue; // add the coin's value to the running total
  coinCount++;               // count one more coin inserted

  console.log(`Inserted coin #${coinCount}: total is now ${totalInserted} cents`);
}

// We only reach this line AFTER the condition (totalInserted < 75) becomes false
console.log(`\nYou inserted ${coinCount} coins. Dispensing your snack! Enjoy!`);

// ---
// Another example: countdown timer
let secondsRemaining = 5;

while (secondsRemaining > 0) {
  console.log(`Launching in ${secondsRemaining}...`);
  secondsRemaining--; // THIS IS CRITICAL — without this, secondsRemaining never changes and we loop forever
}

console.log("🚀 Liftoff!");

const pizzaOrders = [
  { customer: "Marco",   topping: "Pepperoni" },
  { customer: "Yuki",    topping: "Mushrooms" },
  { customer: "Priya",   topping: "Extra Cheese" },
  { customer: "Jordan",  topping: "Jalapeños" }
];

// --- forEach ---
// The function receives each item in the array, one at a time.
// 'order' is just the name we give it — you can name it anything.
// 'orderIndex' is automatically provided — it's the position (0, 1, 2...)
console.log("=== forEach Example ===");
pizzaOrders.forEach(function(order, orderIndex) {
  console.log(`Order #${orderIndex + 1}: ${order.customer} wants ${order.topping} pizza`);
});

// --- for...of ---
// Cleaner syntax when you only need the value, not the index.
// It reads almost like plain English: "for each order of pizzaOrders"
console.log("\n=== for...of Example ===");
for (const order of pizzaOrders) {
  // 'order' holds the current item on each iteration
  console.log(`Preparing ${order.topping} pizza for ${order.customer}`);
}

// --- Arrow function shorthand (you'll see this everywhere in real codebases) ---
console.log("\n=== Arrow Function Shorthand ===");
pizzaOrders.forEach((order) => {
  console.log(`Ready: ${order.customer}'s ${order.topping} pizza 🍕`);
});

// Scenario: A quiz app that always asks at least one question,
// then checks if the player wants to continue.

// We'll simulate the user's responses with an array
const simulatedUserResponses = ["yes", "yes", "no"]; // 'no' means they quit
let responseIndex = 0;
let questionNumber = 0;

do {
  questionNumber++;

  // In a real app, this would be an actual quiz question
  console.log(`Question ${questionNumber}: What is 2 + 2? (Simulated answer: 4)`);

  // Simulate getting a response from the user
  const userWantsToContinue = simulatedUserResponses[responseIndex];
  responseIndex++;

  console.log(`Player said: "${userWantsToContinue}"`);

  // The condition is checked DOWN HERE — after the block already ran
  if (userWantsToContinue !== "yes") {
    console.log("\nPlayer chose to stop. Thanks for playing!");
    break; // exit the loop
  }

} while (responseIndex < simulatedUserResponses.length);

console.log(`Total questions answered: ${questionNumber}`);

// Key point: even if simulatedUserResponses was empty and the condition
// was false from the start, the block inside 'do' would still run once.