Loops and Iteration

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Loops and Iteration step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Choose for...of for values from an iterable
Write a while-loop exit condition before its body
Use break and continue only when they clarify intent
Scan lesson records, skip invalid durations, and return the first lesson above a limit.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

for...of visits values from an iterable and is the clearest default for arrays when the index is irrelevant. A classic for loop exposes initialization, continuation condition, and update together, which is useful when the index is part of the algorithm. for...in visits enumerable property keys and should not be confused with array-value iteration. Before writing more syntax, name the values involved in Loops and Iteration, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

A while loop is appropriate when repetition depends on changing state rather than a collection of known length. Before writing its body, state the invariant, the exit condition, and the exact update that moves toward that exit. A do...while loop runs at least once, so use it only when the domain genuinely requires one attempt before checking. During implementation, keep the for...of rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

break exits the nearest loop and continue skips to its next iteration. Both can make a loop easier to read when they remove deep nesting, but several hidden exits make tracing harder. Array methods are often a stronger description for standard operations: find locates one value, some answers existence, every checks all values, and filter selects a new collection. Verification for Loops and Iteration must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Loops and Iteration example from validated input to returned value or visible effect before editing it.

function firstLongLesson(lessons, limit) {
  for (const lesson of lessons) {
    if (!Number.isFinite(lesson.minutes)) continue;
    if (lesson.minutes > limit) return lesson.title;
  }
  return undefined;
}
console.log(firstLongLesson([{ title: "DOM", minutes: 42 }], 30));

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying for...of contract instead of copying one solution.

function attemptsUntilSuccess(sequence) {
  let index = 0;
  while (index < sequence.length) {
    if (sequence[index] === "success") return index + 1;
    index += 1;
  }
  return 0;
}
console.log(attemptsUntilSuccess(["retry", "success"]));

How to trace this lesson

Write down the exact inputs used by Loops and Iteration.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Changing the wrong variable—or none at all—inside a while loop can make its exit condition permanently true.: Make the for...of rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Choose for...of for values from an iterable
2
Write a while-loop exit condition before its body
3
Use break and continue only when they clarify intent
4
Scan lesson records, skip invalid durations, and return the first lesson above a limit.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Loops and Iteration example. Explain every changed result before continuing.

function firstLongLesson(lessons, limit) {
  for (const lesson of lessons) {
    if (!Number.isFinite(lesson.minutes)) continue;
    if (lesson.minutes > limit) return lesson.title;
  }
  return undefined;
}
console.log(firstLongLesson([{ title: "DOM", minutes: 42 }], 30));

function firstLongLesson(lessons, limit) {
  for (const lesson of lessons) {
    if (!Number.isFinite(lesson.minutes)) continue;
    if (lesson.minutes > limit) return lesson.title;
  }
  return undefined;
}
console.log(firstLongLesson([{ title: "DOM", minutes: 42 }], 30));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

let remaining = 3;
while (remaining > 0) console.log(remaining);

Reveal repair and explanation

let remaining = 3;
while (remaining > 0) {
  console.log(remaining);
  remaining -= 1;
}

The repaired loop changes the value used by its condition, so termination can be proven.

INDEPENDENT LAB

Build without copying the example

Scan lesson records, skip invalid durations, and return the first lesson above a limit.

// Define small functions before composing the complete solution.
// Scan lesson records, skip invalid durations, and return the first lesson above a limit.

// Define small functions before composing the complete solution.
// Scan lesson records, skip invalid durations, and return the first lesson above a limit.

Press Run to execute your code.

Self-review checklist Choose for...of for values from an iterable Write a while-loop exit condition before its body Use break and continue only when they clarify intentWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which loop most directly visits each value of an array? for...of for...in do nothing

2. Which evidence best demonstrates mastery of Loops and Iteration? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

Loops and Iteration | JavaScript Course | SovranCode

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering