« Previous Next »

JavaScript Loops

Loops allow you to run a block of code multiple times. Below are different kinds of loops in JavaScript with examples:

For Loop Example

The for loop runs a block of code a specified number of times.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        for (let i = 0; i < 5; i++) {
            console.log(i);
        }
    </Script>
</body>
</html>

Output: 0, 1, 2, 3, 4

While Loop Example

The while loop executes a block of code as long as a specified condition is true.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        let i = 0;
        while (i < 5) {
            console.log(i);
            i++;
        }
    </Script>
</body>
</html>

Output: 0, 1, 2, 3, 4

Do-While Loop Example

The do-while loop executes the block of code once before checking the condition.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        let i = 0;
        do {
            console.log(i);
            i++;
        } while (i < 5);
    </Script>
</body>
</html>

Output: 0, 1, 2, 3, 4

For...of Loop Example

The for...of loop is used to iterate over arrays or iterable objects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const fruits = ['apple', 'banana', 'cherry'];
        for (let fruit of fruits) {
            console.log(fruit);
        }
    </Script>
</body>
</html>

Output: apple, banana, cherry

Nested Loops Example

Loops can be nested inside other loops.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        for (let i = 1; i <= 3; i++) {
            for (let j = 1; j <= 3; j++) {
                console.log('i = ' + i + ', j = ' + j);
            }
        }
    </Script>
</body>
</html>

Output: A set of combinations for i and j values from 1 to 3.

Break and Continue

Use break to exit a loop, and continue to skip an iteration.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
    // Break example
    for (let i = 0; i < 5; i++) {
        if (i === 3) break;
        console.log(i);
    }
    // Continue example
    for (let i = 0; i < 5; i++) {
        if (i === 3) continue;
        console.log(i);
    }
    </Script>
</body>
</html>

Break Output: 0, 1, 2

Continue Output: 0, 1, 2, 4

Infinite Loop (Avoid)

A loop without a proper termination condition can run indefinitely and crash your program. Be careful when writing loops.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        while (true) {
            console.log('This will run forever');
        }
    </Script>
</body>
</html>

Note: This loop runs forever and will need to be manually stopped.

ForEach Loop Example

The forEach method executes a provided function once for each array element.

                                  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const numbers=[1, 2, 3, 4];
        numbers.forEach(function(number) {
            console.log(number);
        });
    </Script>
</body>
</html>

Output: 1, 2, 3, 4

« Previous Next »