FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Arrays & Collections

Advanced

Array Iteration

Iteration means visiting array items one by one. JavaScript gives you loops and methods for different kinds of iteration.

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

for (const topic of topics) {
  console.log(topic);
}

Arrays & Collections

Choose iteration based on whether you need results or side effects.

for...of is a readable loop for array values. It works well when you need break, continue or await inside a loop.

forEach runs a callback for each item. It is useful for side effects, but it does not return a transformed array.

Array methods such as map, filter and reduce are also forms of iteration. They are best when the method name matches the result you want.

for...of

Readable value loop with break and continue support.

forEach

Runs side effects for every item.

entries

Provides index and value pairs.

Classic for

Useful when manual index control is needed.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

for...of when early exit matters

for (const record of records) {
  if (record.status === "ready") {
    selected = record;
    break;
  }
}

Using forEach while expecting break

records.forEach((record) => {
  if (record.status === "ready") {
    return record;
  }
});

// return only exits the callback, not the outer function.

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

for...of

Loop over values directly.

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

for (const topic of topics) {
  console.log(topic);
}

entries

Read index and value together.

const topics = ["HTML", "CSS"];

for (const [index, topic] of topics.entries()) {
  console.log(index, topic);
}

forEach side effect

Use forEach when you perform an action for each item.

const topics = ["HTML", "CSS"];

topics.forEach((topic) => {
  console.log(topic);
});

break from a loop

Use for...of when you need early exit.

for (const topic of topics) {
  if (topic === "CSS") break;
  console.log(topic);
}

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use for...of for readable loops

It is excellent for values and early exit.

Use forEach for side effects

Rendering, logging or collecting can fit forEach.

Do not expect forEach to return results

Use map, filter or reduce for returned arrays or values.

Use entries for indexes

Avoid manual counters when entries communicates the intent.

Use classic for when needed

Manual index control is still valid for some algorithms.

Keep loop bodies small

Large loop bodies hide the actual iteration logic.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Iteration is where data starts moving. Good loop choice makes the direction of that movement visible.

Accessibility

Rendering loops should create predictable ordered content and avoid duplicate IDs or missing labels.

Production note

Production loops should be readable, avoid unnecessary work and choose early exit when performance matters.

SEO note

Lists rendered from arrays should keep stable order and reliable text content.

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.

  • Rewrite the loop with forEach.
  • Add a break when the topic is CSS.
  • Render the zero-based index instead of index + 1.

Practice assignment

Do this before moving to the next topic.

  1. Write one for...of loop.
  2. Write one forEach callback.
  3. Use entries to read index and value.

Try it yourself

Render items with entries

Live preview

Self-check

Before you continue, prove that you understand Array Iteration.

Advanced

A collection method should tell the reader what kind of operation is happening before they read the callback body.

  1. Can you explain for...of?
  2. Can you explain forEach?
  3. Can you explain when entries is useful?
  4. Can you explain why forEach cannot break normally?
  5. Can you explain side effects versus returned results?