Stop 04 · JavaScriptTopics · 12/36

Loops

In short

Sending a fee reminder to 500 students by hand? No thanks. Loops repeat a task for you, and JavaScript has a few kinds, each good at a different job.

`for`, `for...of`, `for...in`, `while` and `do...while` — different ways to repeat code, each suited to different iteration needs (arrays, objects, custom conditions). Iteration is a foundation for data processing, but choosing the right loop or array method improves clarity and reduces accidental mutation or indexing errors.

The jaadu mascot serves rice and dal to a line of students in the hostel mess.

Think of it like this

The mess serving line

The server does the same thing for every student in line: plate, rice, dal, next. When the line ends, he stops. A loop is that serving line: the same steps, once per item, until a condition says stop.

Watch it happen

for...of with continue

1200

fee

3400

1/4The loop starts at the first fee, 1200. Not zero, so a reminder is logged.

The big ideas

What you need to know

Classic for

for (let i = 0; i < n; i++) when you need the index or a custom step, like every second item.

for...of for values

Walks through arrays, strings, Maps and Sets one value at a time. Your default for lists.

for...in for object keys

Loops over an object's keys. Don't use it on arrays, it gives indexes as strings.

while, break and continue

while runs until a condition is false. break exits the loop, continue skips to the next round.

See it in code

Walk through the code

1const fees = [1200, 0, 3400];2 3for (let i = 0; i < fees.length; i++) {4  console.log("Student", i + 1, "owes", fees[i]);5}6 7for (const fee of fees) {8  if (fee === 0) continue;     // skip students who've paid9  console.log("Reminder for", fee);10}11 12const student = { name: "Isha", year: 2 };13for (const key in student) console.log(key);  // "name", "year"14 15let tries = 0;16while (tries < 3) tries++;

1/4Classic for: i starts at 0 and stops before fees.length, so it reads indexes 0 to 2.

Pick the loop by what you need: index (for), values (for...of), object keys (for...in) or an unknown number of rounds (while).

Save yourself the pain

Common mistakes

Oops

Writing i <= arr.length in a for loop.

Do this instead

Use i < arr.length. The last index is length - 1, so <= reads one item past the end and gets undefined.

Oops

A while loop whose condition never becomes false.

Do this instead

Make sure something inside the loop moves it towards the exit, or the tab freezes.

Your mission

Times table printer

~15 min

Quick check

const arr = [1, 2, 3]; for (let i = 0; i <= arr.length; i++) console.log(arr[i]); What prints?

Go deeper

1Use `for...of` to iterate an array and `for...in` to iterate object keys. Verify the behavior with realistic data and handle the failure or empty state as well.
2Learn why `for...of` is usually preferred over classic `for` loops for arrays. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Practice `break` and `continue` to control loop flow.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download