Basic

Loops and Iteration

Repeat work with for, while, and the modern iteration methods.

What you will see

0 1 2 4 5

About 2 min of reading

Quick check

Before this new lesson, one small question about the lesson you just finished. Recall it, do not look it up.

Try It

Repeat work with a for loop, fold an array down to a single value, and control the flow with break and continue. Each change flips exactly one line of output.

Count from zero up to just below a limit with a for loop, printing each value. The loop runs while the condition stays truthy.

for (let i = 0; i < 5; i++) { console.log(i); }

Before you run it, say out loud what it will print. Then open the answer.

What it prints

0 1 2 3 4

A for loop has initialization, condition, and update. The body runs while the condition is truthy; the update happens after each iteration.

Transform every element with map, then fold the whole array to one number with reduce. Both return new data instead of changing the original.

const nums = [1, 2, 3, 4]; const sum = nums.reduce((a, b) => a + b, 0); console.log(nums.length); console.log(sum);

Before you run it, say out loud what it will print. Then open the answer.

What it prints

4 10

map/filter/reduce return new arrays or values and never mutate the source. Prefer them over manual loops when you are transforming data.

Skip one value with continue and stop early with break. Watch the printed sequence jump over the skipped index and halt before the exit index.

for (let i = 0; i < 10; i++) { if (i === 3) continue; if (i === 6) break; console.log(i); }

Before you run it, say out loud what it will print. Then open the answer.

What it prints

0 1 2 4 5

`break` exits the loop entirely; `continue` skips only the rest of the current iteration. Prefer find/some/every when you only need to search.

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

A loop repeats a body while a condition holds; higher-order methods build new arrays from old ones.

1 Initialize loop state

↓

2 Check condition -> enter body

↓

3 Execute body -> update state

↓

4 Reduce/map/filter -> produce new result

Why this works

Break and continue

Control loop flow explicitly:

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;   // skip to next iteration
  if (i === 6) break;      // exit the loop entirely
  console.log(i);
}
// 0 1 2 4 5

break exits the loop; continue skips the rest of the current iteration. Prefer find/some/every on arrays over manual loops when you only need to search.

When you have a choice

When to use which loop

Choose the loop for the job. Use for...of to iterate array values, for...in to iterate object keys, and while when the number of iterations is unknown:

let n = 100;
while (n > 1) { n /= 2; }   // run until condition fails

For transforming data, prefer map/filter/reduce over for loops, they are shorter, return new arrays, and read as intent rather than mechanics.

Examples

The for loop

Repeating a known number of times

for (let i = 0; i < 5; i++) {
  console.log(i);   // 0 1 2 3 4
}

A for loop has three parts: initialization, condition, and update. The loop body runs while the condition is truthy. Use const for values that never change inside the body.

for...of and for...in

Iterating values and keys

const arr = [10, 20, 30];
for (const value of arr) {   // iterates VALUES
  console.log(value);
}

const obj = { a: 1, b: 2 };
for (const key in obj) {     // iterates KEYS
  console.log(key, obj[key]);
}

for...of works on arrays, strings, maps, sets. for...in iterates enumerable keys including inherited ones, so filter with hasOwnProperty when needed.

Array methods: map, filter, reduce

Functional iteration

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2);        // [2,4,6,8]
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const sum = nums.reduce((a, b) => a + b, 0); // 10

map transforms each element, filter keeps matching ones, reduce folds everything into a single accumulator. These return new arrays and avoid mutating the original.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Control Flow: Conditionals

Previous Lesson

Control Flow: Conditionals

Next Lesson

Functions

Functions →