What Are JavaScript Loops?

Imagine you need to display the numbers from 1 to 100 on a webpage. You could write 100 separate lines of code, but that would take a long time and be difficult to maintain.

A loop repeats a block of instructions. Instead of writing the same code again and again, you tell JavaScript how long to keep repeating it.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

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

Both examples produce the same output, but the loop is shorter and easier to change.

Repeat Code a Specific Number of Times

The for loop is useful when you know how many times you want something to happen.

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

A for loop contains three parts:

• let i = 1 — creates the starting counter.
• i <= 5 — keeps the loop running while the condition is true.
• i++ — increases the counter after each iteration.

Each time the loop runs is called an iteration.

Repeat While a Condition Is True

The while loop checks its condition before each iteration. It's useful when the number of repetitions depends on a changing condition.

let count = 1;

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

The loop continues until count becomes 6. At that point, the condition is false and the loop stops.

Run the Code at Least Once

A do...while loop is similar to a while loop, but it checks the condition after running the code.

let number = 10;

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

Even though the condition is false, the loop runs once because JavaScript executes the do block before checking the condition.

Control What Happens Inside a Loop

Sometimes you want to stop a loop early or skip one iteration. JavaScript provides two helpful statements.

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

The break statement exits the loop when i reaches 6. Only the numbers 1 through 5 are printed.

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

The continue statement skips the rest of the current iteration and moves to the next one.

Make Loops More Flexible

Loops don't have to count upward by one. You can count backward or increase the counter by larger steps.

for (let i = 5; i >= 1; i--) {
  console.log(i);
}

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

Changing the starting value, condition, and counter update gives you control over exactly which numbers a loop produces.

Use Loops to Build Webpage Content

Loops can do more than print to the console. They can also create lists and display repeated information on a webpage.

const list = document.getElementById("numbers");

for (let i = 1; i <= 5; i++) {
  const item = document.createElement("li");
  item.textContent = "Number " + i;
  list.appendChild(item);
}

With an HTML list such as <ul id="numbers"></ul>, this code creates five list items automatically.