Introduction

Loops let JavaScript execute a block of code repeatedly. They are one of the most basic tools for data processing, iteration, and algorithm implementation.

What Is a Loop?

A loop repeats a task until a condition is no longer satisfied.

JavaScript provides several loop forms:

• for
• while
• do...while
• for...in
• for...of

for

Basic syntax

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

Execution order

1. initialization
2. condition check
3. loop body
4. update expression

Example

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Nested loops

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

while

Basic syntax

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

Example

while is useful when the number of iterations is not known in advance.

let password = "";

while (password !== "123456") {
  password = "123456";
}

do...while

Basic syntax

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

Example

do...while always runs the body at least once.

for...in

Basic syntax

const user = { name: "Tom", age: 20 };

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

Why it is not commonly used for arrays

for...in iterates over enumerable property keys, not values. It is mainly for objects, not arrays.

for...of

Basic syntax

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

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

Example

for...of is usually cleaner than index-based loops when you only need values.

Loop control statements

break

Stops the loop completely.

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

continue

Skips the current iteration and moves to the next one.

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

How to Choose

Suitable use cases

• for: index-based control
• while: unknown number of iterations
• do...while: must run at least once
• for...in: object keys
• for...of: iterable values

Performance

Performance differences usually matter less than readability unless you are in a true hot path.

Practical Scenarios

1. Data processing

const scores = [90, 85, 100];
let total = 0;

for (const score of scores) {
  total += score;
}

2. DOM operations

const items = document.querySelectorAll("li");

for (const item of items) {
  item.classList.add("active");
}

3. Algorithm implementation

Loops are the basis of searching, sorting, counting, traversal, and more.

Common Pitfalls and Best Practices

1. Avoid infinite loops

Always make sure the loop condition can eventually become false.

2. Be careful with for...in

Do not use it as your default loop for arrays.

3. Async operations inside loops

Be careful with asynchronous logic in loops.

for (const id of ids) {
  const user = await fetchUser(id);
  console.log(user);
}

Sequential await is sometimes correct, but sometimes you may want Promise.all.

4. Performance suggestions

• cache repeated values when necessary
• avoid unnecessary nested loops
• prefer readable code first

Modern JavaScript Looping

Array methods vs traditional loops

Modern JavaScript often uses:

• map
• filter
• reduce
• some
• every

These are often more declarative than manual loops.

Modern handling of async loops

• for...of with await for sequential async work
• Promise.all for concurrent async work

Summary

Loops are fundamental, but choosing the right loop matters:

• use the clearest form for the job
• avoid infinite loops
• be careful with async behavior
• prefer modern array methods when they improve readability