Online Compiler logoOnline Compiler
Start Coding

JavaScript Tutorial

JavaScript Loops

Loops let you repeat tasks efficiently, from iterating arrays to retrying network calls.

Choosing the right loop keeps code clear and avoids bugs like infinite loops.

Contents

IntroductionWhy We Need ItSyntaxBasic ExampleReal World ExampleMultiple Use CasesComparisonCommon MistakesInterview QuestionsPractice ProblemFAQRelated TopicsTry It Yourself

Quick Actions

Open CompilerRun First Example

Why We Need It

Most data comes in lists. Loops are how you process each item without duplicating code.

Understanding loop types and controls helps you write fast, reliable logic.

Syntax

for (init; condition; step) { ... }
while (condition) { ... }
do { ... } while (condition)
for (const value of iterable) { ... }
for (const key in object) { ... }

Basic Example

1. for loop

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

A for loop is perfect when you know the count.

Run Code

Real World Example

2. while loop

let attempts = 0;

while (attempts < 3) {
  attempts++;
}

console.log(attempts);

while loops run as long as the condition is true.

Run Code

Multiple Use Cases

Repeat Work Safely

Loops execute a block multiple times. They are essential for processing arrays, retries, and repeated tasks.

Always ensure loops have clear exit conditions to avoid infinite loops.

  • Use `for` when you know the number of iterations.
  • Use `while` when you loop until a condition changes.
  • Use `do...while` when the body must run at least once.

Iterating Collections

Use `for...of` for values in arrays, strings, and iterables.

Use `for...in` for object keys, but be careful with inherited properties.

Control Flow

`break` exits a loop early, and `continue` skips to the next iteration.

These give you fine-grained control without extra flags.

More Examples

3. for...of

const items = ["a", "b", "c"];

for (const item of items) {
  console.log(item);
}

for...of iterates over values.

Run Code

4. break and continue

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  if (i === 4) break;
  console.log(i);
}

Use continue to skip, break to exit.

Run Code

Comparison

Without

let i = 0;
console.log(i);
i++;
console.log(i);
i++;

With

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

Common Mistakes and Fixes

Infinite loop

Ensure the loop condition can become false.

Off-by-one errors

Check boundaries carefully (use < vs <= intentionally).

Using for...in on arrays

Prefer for...of or array methods for values.

Mutating arrays while looping

Be cautious when changing the collection during iteration.

Interview Questions

What is an infinite loop?

A loop that never ends because its condition never becomes false.

for...of vs for...in?

for...of iterates values, for...in iterates keys.

When to use do...while?

When the loop body must run at least once.

Practice Problem

Practice: Loop through an array of prices and sum the total.

const prices = [10, 25, 5];
// TODO: sum prices

One Possible Solution

const prices = [10, 25, 5];
let total = 0;
for (const price of prices) {
  total += price;
}
console.log(total);

Frequently Asked Questions

Which loop should I use?

Use for when you know the count, while when the stop condition is dynamic.

What is the difference between for...in and for...of?

for...in iterates keys; for...of iterates values.

When should I use break?

When you want to exit early after finding what you need.

Try It Yourself

Run these loops and adjust the counts to see how they behave.

Run Loop DemoOpen Compiler