JavaScript Loops and Conditional Structures

JavaScript loops repeat code, while conditional statements decide which code should run. The main loop forms are classic for, while, do...while, for...of, and for...in. break stops a loop and continue skips to the next iteration.

Simple loop:

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

Choose the loop based on what controls repetition: a counter, a condition, iterable values, or object property keys.

Classic for Loop Top ↑

Use a classic for loop when initialization, a stopping condition, and an update expression fit naturally together.

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

The full JavaScript for loop tutorial covers custom steps, countdowns, nesting, labels, break, continue, scope, and alternatives.

while Loop Top ↑

while checks its condition before each iteration. The body can run zero times.

let count = 0;

while (count < 3) {
  console.log(count);
  count += 1;
}

do...while Loop Top ↑

do...while checks its condition after the body, so the body runs at least once.

let count = 0;

do {
  console.log(count);
  count += 1;
} while (count < 3);

See while and do...while loops.

for...of for Iterable Values Top ↑

for...of iterates values from an iterable such as an array, string, map, or set. It is often clearer than manual index management when you only need each value.

const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}

for...in for Enumerable Property Keys Top ↑

for...in iterates enumerable string property names. It is primarily an object-property tool, not the default way to iterate array values.

const user = { name: "Maya", role: "editor" };

for (const key in user) {
  console.log(key, user[key]);
}

When inherited enumerable properties matter, use an ownership check such as Object.hasOwn(), or iterate Object.keys(), Object.values(), or Object.entries() when those better match the task.

Stopping a Loop with break Top ↑

for (let i = 1; i <= 10; i += 1) {
  if (i === 4) {
    break;
  }
  console.log(i);
}

break exits the nearest loop or switch statement. Labeled break can exit an outer loop, but labels should be used only when they genuinely improve clarity.

Skipping an Iteration with continue Top ↑

for (let i = 1; i <= 5; i += 1) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

continue skips the remaining statements in the current iteration and proceeds with the next iteration according to that loop type.

Using if...else Inside a Loop Top ↑

Loops and conditions are frequently combined so only selected iterations perform an action.

for (let i = 1; i <= 5; i += 1) {
  if (i % 2 === 0) {
    console.log(`${i} is even`);
  } else {
    console.log(`${i} is odd`);
  }
}

See if...else for complete conditional logic.

Using switch with Repeated Data Top ↑

A loop can process several items while a switch statement selects behavior for each item.

const actions = ["save", "delete", "view"];

for (const action of actions) {
  switch (action) {
    case "save": console.log("Saving"); break;
    case "delete": console.log("Deleting"); break;
    default: console.log("Viewing");
  }
}

Choosing the Right JavaScript Loop Top ↑

Avoiding Infinite Loops Top ↑

A loop becomes infinite when its termination condition can never become false and no reachable break stops it.

let count = 0;

while (count < 3) {
  console.log(count);
  count += 1; // progress toward termination
}

When debugging a loop that freezes a page, inspect the condition, update expression, continue paths, and data mutation that should eventually stop the loop.

Loops and Asynchronous Code Top ↑

A normal loop does not automatically wait for asynchronous operations. Inside an async function, for...of with await can deliberately process operations sequentially, while Promise.all() is often used when independent operations should run concurrently.

async function processItems(items) {
  for (const item of items) {
    await saveItem(item);
  }
}

Common Loop Mistakes Top ↑

• Off-by-one conditions such as <= array.length.
• Forgetting the update that eventually ends a while loop.
• Using for...in when array values are intended.
• Changing the collection unexpectedly while iterating it.
• Using forEach() when you need normal break, continue, or straightforward await sequencing.
• Creating deeply nested loops where a lookup structure or algorithmic change would be clearer and faster.

Detailed Loop and Condition Tutorials Top ↑

Read for loop, while and do...while, if...else, and switch.

← if...else For Loop →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: