JavaScript Loops Tutorial for Beginners

JavaScript loops are used to execute a block of code multiple times. Instead of writing the same code again and again, you can use a loop to perform repetitive tasks automatically.

For example, if you want to print numbers from 1 to 10, you can use a loop instead of writing ten separate console.log() statements.

In this tutorial, you will learn about different types of JavaScript loops with simple examples.

What Are Loops in JavaScript?

A loop repeats a block of code as long as a specified condition is true.

Example

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

Output:

1
2
3
4
5

The loop prints numbers from 1 to 5.

Types of Loops in JavaScript

JavaScript provides several types of loops:

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

Let’s understand each one.

1. JavaScript for Loop

A for loop is used when you know how many times you want to execute a block of code.

Syntax

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

Example

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

Output:

Hello World
Hello World
Hello World
Hello World
Hello World

How It Works

• Initialization: let i = 1 sets the starting value.
• Condition: i <= 5 checks whether the loop should continue.
• Update: i++ increases the value of i by 1 after each iteration.

The loop stops when the condition becomes false.

2. JavaScript while Loop

A while loop executes code as long as its condition is true. It is useful when you do not know in advance how many iterations are needed.

Syntax

while (condition) {
    // Code to execute
}

Example

let i = 1;

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

Output:

1
2
3
4
5

In this example, the loop checks the condition before executing the code. The i++ statement increases the value of i so that the loop eventually stops.

Important: If you forget to update the variable when necessary, the loop may run forever. This is called an infinite loop.

3. JavaScript do…while Loop

A do...while loop executes the code at least once, even if the condition is false. The condition is checked after the code runs.

Syntax

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

Example

let i = 1;

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

Output:

1
2
3
4
5

Difference Between while and do…while

The while loop checks the condition before executing the code. The do...while loop checks the condition after executing the code.

For example:

let i = 10;

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

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

Output:

Do while loop

The while loop does not execute because its condition is false. The do...while loop executes once before checking the condition.

4. JavaScript for…of Loop

A for...of loop is used to iterate over the values of iterable objects, such as arrays and strings.

Example With an Array

const fruits = ["Apple", "Banana", "Mango"];

for (const fruit of fruits) {
    console.log(fruit);
}

Output:

Apple
Banana
Mango

Example With a String

for (const letter of "Hello") {
    console.log(letter);
}

Output:

H
e
l
l
o

Use for...of when you want to access the values of an array or another iterable.

5. JavaScript for…in Loop

A for...in loop is used to iterate over the enumerable property keys of an object.

Example

const user = {
    name: "Harshit",
    age: 30,
    city: "Jaipur"
};

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

Output:

name Harshit
age 30
city Jaipur

In this example, key contains each property name, while user[key] accesses its value.

Note: Use for...in mainly for objects. For arrays, prefer for...of when you need the values.

break and continue in JavaScript Loops

JavaScript provides two statements to control loop execution.

break Statement

The break statement stops the loop immediately.

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

    console.log(i);
}

Output:

1
2

The loop stops when i becomes 3.

continue Statement

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

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

    console.log(i);
}

Output:

1
2
4
5

The number 3 is skipped, but the loop continues.

Conclusion

JavaScript loops make it easy to repeat tasks without writing the same code multiple times.

Here is a quick summary:

• for: Use when you know the number of iterations.
• while: Use when a condition determines how long the loop runs.
• do…while: Use when the code must execute at least once.
• for…of: Use to iterate over iterable values.
• for…in: Use to iterate over object property keys.

Practice these loops with arrays, objects, and simple coding exercises to improve your JavaScript skills.

Frequently Asked Questions

1. What is a loop in JavaScript?

A loop is a programming structure that repeats a block of code while a condition is satisfied or while items remain to be processed.

2. How many types of loops are there in JavaScript?

The five commonly used loop statements are for, while, do...while, for...of, and for...in.

3. What is the difference between for and while loops?

A for loop groups initialization, condition, and update in one statement. A while loop checks a condition and is often used when the number of iterations is not known in advance.

4. What is an infinite loop?

An infinite loop continues running because its stopping condition never becomes false or because it has no effective stopping condition.

5. Can we use break and continue in JavaScript loops?

Yes. break terminates the loop, while continue skips the current iteration and proceeds to the next one.