Platform under construction

Control Flow

Intermediate

for Loops

for loops repeat a block with a counter. They are useful when you know how many steps you need or when indexes matter.

const items = ["HTML", "CSS", "JavaScript"];

for (let index = 0; index < items.length; index += 1) {
  console.log(`${index + 1}. ${items[index]}`);
}

Control Flow

A for loop gives you control over start, stop and step.

A classic for loop has three parts: initialization, condition and afterthought. The initialization runs once. The condition is checked before every iteration. The afterthought runs after each completed iteration.

Use for loops when you need an index, a fixed number of repeats, a custom step size or precise control over when the loop stops.

Modern JavaScript often uses array methods or for...of for simple collection work. The classic for loop still matters because it makes the counter and stopping rule explicit.

Initialization

Creates the counter, usually let index = 0.

Condition

Keeps the loop running while it is true.

Afterthought

Updates the counter after each iteration.

Index access

items[index] reads the current array item.

Examples

Control flow should make the program path easy to follow.

Loop with a clear counter

const labels = ["Start", "Build", "Review"];

for (let index = 0; index < labels.length; index += 1) {
  console.log(`${index + 1}. ${labels[index]}`);
}

Wrong condition creates an extra iteration

for (let index = 0; index <= labels.length; index += 1) {
  console.log(labels[index]);
}

// The final item is undefined because arrays are zero-based.

Rules that matter

Make branches, loops and exits deliberate.

Control flow decides which path code takes. Keep that path visible: name conditions, protect loop boundaries, avoid accidental fallthrough and use early exits only when they make the main path clearer.

Use let for counters

The counter changes, so let communicates reassignment.

Stop before length

Use index < array.length, not index <= array.length.

Avoid changing length inside the loop

Mutating the array while looping over it can create surprises.

Keep loop bodies focused

If the body grows large, extract a function.

Use index only when needed

If you do not need the index, for...of is usually cleaner.

Watch infinite loops

The condition must eventually become false.

Production thinking

Reliable branching is reliable behavior.

Why does this matter?

Loops turn one instruction into repeated work. That power is essential, but one wrong condition can repeat too much, skip data or never stop.

Accessibility

Generated lists, tabs and messages should preserve semantic HTML and readable order when loops create markup.

Production note

Production loops need safe boundaries, predictable data and clear performance expectations for large collections.

SEO note

If loops generate content or links, wrong indexes can create missing, duplicate or broken output.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the loop to stop after two items.
Start the counter at 1 and adjust the array access.
Add one more topic and confirm the loop updates automatically.

Practice assignment

Do this before moving to the next topic.

Write a for loop that counts from 0 to 4.
Write a for loop that counts from 5 down to 1.
Use a for loop to read every item in an array.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand for Loops.