Why should you care?

Show 100 products without copying HTML 100 times — loop over an array and print each item.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

for (let i = 1; i <= 5; i++) {
  console.log("Count:", i);
}

let n = 0;
while (n < 3) {
  console.log("While:", n);
  n++;
}

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• for has init (let i = 1), condition (i <= 5), and step (i++).
• while checks n < 3 and increments n inside the block.

Practice next

1. Run the for and while examples.
2. Change the for loop upper bound to 10.
3. Loop colors with for (const c of ["red","green","blue"]).
4. Rewrite the for loop as while with the same output.
5. Use continue to skip even numbers in a 1–10 loop.

Remember

for — known number of repeats while — repeat until condition fails for...of — easy loop over arrays

ScriptVerse product grid

An e-commerce page loops over a products array to render card HTML without copy-pasting markup.

Outcome: One loop template scales from 10 to 10,000 products with the same code.