JavaScript Loops: for, while, and do…while

by

When writing JavaScript programs, you will often need to perform the same task multiple times. For example, you may need to display the numbers from 1 to 10, process every item in an array, repeat an action until a condition becomes false, or create a countdown for a game. Writing the same code separately for every repetition would make a program unnecessarily long and difficult to maintain.

JavaScript provides loops to solve this problem. A loop allows you to execute a block of code repeatedly while a particular condition is satisfied.

The three fundamental loops covered in this tutorial are the for loop, the while loop, and the do...while loop.

Understanding these loops gives you an important foundation for working with arrays, objects, user input, games, calculations, data processing, and many other JavaScript applications.

What Is a Loop in JavaScript?

A loop is a programming structure that repeatedly executes a block of code.

For example, suppose you want to print the numbers from 1 to 5. Without a loop, you could write:

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

Although this works, it becomes impractical when you need to print hundreds or thousands of values.

A loop allows you to write the logic once:

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

Output:

1
2
3
4
5

The loop automatically repeats the code while its condition remains true.

Why Are Loops Important?

Loops are one of the most commonly used concepts in programming because applications frequently need to repeat operations.

You might use a loop to:

  • Display a list of products
  • Process array elements
  • Generate numbers
  • Calculate totals
  • Create tables
  • Validate multiple values
  • Process user data
  • Build countdown timers
  • Create game logic
  • Search through data
  • Generate dynamic HTML
  • Repeat an operation until a condition changes

Instead of writing repetitive code manually, loops allow JavaScript to perform repetitive tasks efficiently.

The for Loop

The for loop is one of the most commonly used loops in JavaScript.

It is particularly useful when you know how many times you want to repeat an operation or when you have a clear counter.

The basic syntax is:

for (initialization; condition; update) {
    // Code to execute
}

For example:

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

Output:

1
2
3
4
5

The for loop contains three important parts:

for (let i = 1; i <= 5; i++)

These are:

  • Initialization
  • Condition
  • Update

Initialization in a for Loop

The initialization runs once when the loop starts.

In this example:

let i = 1;

The variable i is created and assigned the initial value 1.

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

The variable i is commonly called a loop counter.

You can use other variable names as well:

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

The name does not matter as long as the code is written correctly.

The Condition in a for Loop

The condition determines whether the loop should continue.

i <= 5

As long as this condition evaluates to true, the loop executes.

When the condition becomes false, the loop stops.

For example:

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

The loop works approximately like this:

i = 1 → condition true → execute
i = 2 → condition true → execute
i = 3 → condition true → execute
i = 4 → condition false → stop

The Update in a for Loop

The update changes the loop variable after each iteration.

In this example:

i++

increases i by one.

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

You can also use other update expressions.

For example:

i += 2

This increases the value by two:

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

Output:

0
2
4
6
8
10

You can also decrease the value:

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

Output:

5
4
3
2
1

How a for Loop Executes

Consider this example:

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

JavaScript follows this general sequence:

Initialization
     ↓
Condition
     ↓
Execute loop body
     ↓
Update
     ↓
Condition
     ↓
Execute loop body
     ↓
Update
     ↓
Condition becomes false
     ↓
Loop ends

Understanding this execution order makes it much easier to identify mistakes in loop logic.

Using a for Loop to Calculate a Sum

Loops can be used to perform calculations repeatedly.

For example:

let total = 0;

for (let i = 1; i <= 5; i++) {
    total += i;
}

console.log(total);

Output:

15

The loop calculates:

1 + 2 + 3 + 4 + 5 = 15

Using a for Loop With an Array

You can use a for loop to access elements in an array.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

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

Output:

Apple
Banana
Mango
Orange

The loop begins at index 0 because JavaScript arrays use zero-based indexing.

The condition:

i < fruits.length

ensures that the loop stops before reaching an invalid index.

Nested for Loops

A loop can contain another loop. This is called a nested loop.

For example:

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

The inner loop runs completely for each iteration of the outer loop.

Nested loops are useful for working with grids, tables, matrices, game boards, and other multi-dimensional data structures.

However, they should be used carefully because multiple nested loops can result in a large number of operations.

The while Loop

The while loop repeatedly executes code as long as a condition is true.

Its basic syntax is:

while (condition) {
    // Code to execute
}

For example:

let i = 1;

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

Output:

1
2
3
4
5

Unlike a for loop, the initialization and update are normally written separately.

How the while Loop Works

A while loop checks its condition before executing its body.

Consider:

let count = 1;

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

The process is:

count = 1
↓
1 <= 3 → true
↓
print 1
↓
count becomes 2
↓
2 <= 3 → true
↓
print 2
↓
count becomes 3
↓
3 <= 3 → true
↓
print 3
↓
count becomes 4
↓
4 <= 3 → false
↓
stop

This makes the while loop useful when the number of iterations is not necessarily known in advance.

A while Loop With User Input

A while loop can be useful when an operation needs to continue until a particular condition changes.

For example:

let password = "";

You could conceptually continue asking for a password until a valid value is provided.

In browser applications, this kind of logic is often handled with forms and event-driven code rather than repeatedly blocking the browser with prompt(), but the loop concept remains the same.

The while Loop With a Counter

A counter is often used with a while loop.

let count = 5;

while (count > 0) {
    console.log(count);
    count--;
}

Output:

5
4
3
2
1

Once count reaches 0, the condition becomes false and the loop ends.

The Importance of Updating a while Loop

When using a while loop, you must make sure that something eventually causes the condition to become false.

For example:

let i = 1;

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

This loop has a serious problem.

The value of i never changes, so the condition:

i <= 5

remains true forever.

This creates an infinite loop.

The correct version is:

let i = 1;

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

Always make sure your loop has a valid path toward termination unless an intentionally infinite loop is required.

The do...while Loop

The do...while loop is similar to the while loop, but there is one important difference.

A do...while loop executes its code at least once because the condition is checked after the loop body.

The syntax is:

do {
    // Code to execute
} while (condition);

For example:

let i = 1;

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

Output:

1
2
3
4
5

How do...while Works

Consider:

let count = 1;

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

The execution order is:

Execute loop body
      ↓
Update value
      ↓
Check condition
      ↓
If true, repeat
      ↓
If false, stop

This is different from a while loop because the while loop checks its condition before running the body.

The Important Difference Between while and do...while

Consider a condition that is already false.

With while:

let i = 10;

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

Nothing is printed because 10 < 5 is false before the loop begins.

Now consider do...while:

let i = 10;

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

Output:

10

The code executes once before JavaScript checks the condition.

This is the key difference between these two loops.

for vs while vs do...while

Featureforwhiledo...while
Condition checkedBefore each iterationBefore each iterationAfter each iteration
Guaranteed to execute onceNoNoYes
Initialization commonly includedYesUsually outsideUsually outside
Update commonly includedYesUsually insideUsually inside
Best suited forKnown/reasonable iteration structureCondition-based repetitionAt-least-once execution

When Should You Use a for Loop?

A for loop is often a good choice when you have a counter or a clear iteration structure.

For example:

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

This is especially common when working with arrays by index or repeating an operation a known number of times.

When Should You Use a while Loop?

A while loop is useful when the condition is more important than a specific number of iterations.

For example:

while (gameRunning) {
    // Game logic
}

The loop can continue as long as gameRunning remains truthy.

Another example could be processing data until a particular condition changes.

When Should You Use a do...while Loop?

A do...while loop is useful when the code must execute at least once before the condition is evaluated.

For example, a menu-based application may display a menu first and then decide whether it should continue.

let choice;

do {
    console.log("Display menu");
    // Get or process choice
} while (choice !== "exit");

The menu needs to appear before the program can determine what the user wants to do next.

Using break With Loops

The break statement immediately stops a loop.

For example:

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }

    console.log(i);
}

Output:

1
2
3
4

When i becomes 5, break terminates the loop.

This is useful when you have found the value you were searching for or when continuing the loop is no longer necessary.

Using continue With Loops

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

For example:

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

    console.log(i);
}

Output:

1
2
4
5

The iteration where i equals 3 is skipped.

Looping Through Even Numbers

You can combine conditions and loop updates to generate specific sequences.

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

Output:

2
4
6
8
10

This approach is often cleaner than checking every number individually.

Creating a Multiplication Table

Loops are particularly useful for calculations such as multiplication tables.

let number = 5;

for (let i = 1; i <= 10; i++) {
    console.log(`${number} × ${i} = ${number * i}`);
}

Output:

5 × 1 = 5
5 × 2 = 10
5 × 3 = 15
5 × 4 = 20
5 × 5 = 25
5 × 6 = 30
5 × 7 = 35
5 × 8 = 40
5 × 9 = 45
5 × 10 = 50

This is a simple example of how loops can eliminate repetitive code.

Creating a Countdown

A countdown can be created with a decreasing for loop:

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

console.log("Go!");

The same basic concept can be used in games, timers, quizzes, and other applications.

Common Loop Mistakes

Forgetting to Update the Counter

This can create an infinite loop:

let i = 1;

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

The solution is to update i:

let i = 1;

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

Using the Wrong Condition

A small mistake in the condition can cause a loop to execute too many or too few times.

For example:

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

prints:

1
2
3
4

It does not print 5 because the condition is i < 5.

If you want to include 5, use:

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

Creating an Infinite Loop Accidentally

Always check whether your loop can eventually reach a false condition.

while (true) {
    console.log("Running");
}

This intentionally creates an infinite loop, but an infinite loop can also happen accidentally when the loop variable never changes or moves in the wrong direction.

Changing the Counter in the Wrong Direction

Consider:

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

The condition expects i to eventually become greater than 5, but i-- makes it smaller instead.

This can create an infinite loop.

The correct update is:

i++

Best Practices for JavaScript Loops

Choose the loop structure based on the problem rather than simply using the loop you are most familiar with.

Use a for loop when initialization, condition, and update naturally belong together.

Use a while loop when the continuation condition is the primary part of the logic.

Use do...while when the operation needs to execute at least once before checking whether it should continue.

Keep loop conditions easy to understand because complicated conditions can make debugging unnecessarily difficult.

Avoid unnecessary nested loops when processing large amounts of data because the number of operations can increase rapidly.

Always make sure that loops have a clear termination condition unless an intentionally continuous loop is required.

JavaScript Loop Cheat Sheet

for

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

Use it when the loop has a clear initialization, condition, and update.

while

let i = 0;

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

Use it when the loop should continue while a condition remains true.

do...while

let i = 0;

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

Use it when the code needs to execute at least once.

break

break;

Stops the current loop immediately.

continue

continue;

Skips the current iteration and continues with the next one.

Frequently Asked Questions

What is a loop in JavaScript?

A loop is a programming structure that repeatedly executes a block of code while a particular condition is satisfied.

What are the main JavaScript loops?

The fundamental loops covered here are for, while, and do...while. JavaScript also provides specialized iteration mechanisms such as for...of and for...in, which are useful for iterating over iterable values and object properties.

What is the difference between for and while?

A for loop places the initialization, condition, and update in one loop structure, making it convenient when you have a clear counter. A while loop normally keeps these parts separate and is useful when repetition depends primarily on a condition.

What is the difference between while and do...while?

A while loop checks its condition before executing its body, so it may execute zero times. A do...while loop checks its condition after executing its body, so it always executes at least once.

Which loop should beginners learn first?

The for loop is often a useful starting point because its initialization, condition, and update structure clearly demonstrates how repetition works. However, understanding while and do...while is also important because they solve different types of problems.

Can a for loop run zero times?

Yes. If its condition is false before the first iteration, the body does not execute.

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

Nothing is printed.

Can a do...while loop run zero times?

No. The body of a do...while loop executes at least once because its condition is checked afterward.

What does break do in JavaScript loops?

break immediately terminates the loop and continues execution with the code following the loop.

What does continue do in JavaScript loops?

continue skips the remaining statements in the current iteration and proceeds to the next iteration.

Leave a Comment