JavaScript For Loops and Control Flow

In JavaScript, loops are fundamental constructs used for iterating over data structures and executing code repeatedly. They provide flexibility in handling tasks that involve sequential processing and conditional execution. Let's explore different types of loops and how they enhance control flow in JavaScript.

Basic for Loop

The for loop is a versatile tool for iterating a block of code multiple times based on a condition. Here's a basic example:

for (let i = 0; i <= 10; i++) {
    const element = i;
    if (element == 5) {
        console.log("Reached 5 and now it's printed");
    }
    console.log(element);
}

Nested for Loops

Nested for loops are used when iterating over multi-dimensional data structures or for performing operations in a hierarchical manner.

for (let i = 1; i <= 10; i++) {
     console.log(`Outer loop value: ${i}`);
    for (let j = 1; j <= 10; j++) {
         console.log(`Inner loop value: ${j} and outer loop ${i}`);
         console.log(`${i} * ${j} = ${i * j}`);
    }    
}

Output of above code will be:

outer loop value: 1
inner loop value: 1 and outer loop 1
inner loop value: 2 and outer loop 1
inner loop value: 3 and outer loop 1
inner loop value: 4 and outer loop 1
inner loop value: 5 and outer loop 1
inner loop value: 6 and outer loop 1
inner loop value: 7 and outer loop 1
inner loop value: 8 and outer loop 1
inner loop value: 9 and outer loop 1
inner loop value: 10 and outer loop 1
outer loop value: 2
inner loop value: 1 and outer loop 2
inner loop value: 2 and outer loop 2
inner loop value: 3 and outer loop 2
inner loop value: 4 and outer loop 2
inner loop value: 5 and outer loop 2
inner loop value: 6 and outer loop 2
inner loop value: 7 and outer loop 2
inner loop value: 8 and outer loop 2
inner loop value: 9 and outer loop 2
inner loop value: 10 and outer loop 2
outer loop value: 3
inner loop value: 1 and outer loop 3
inner loop value: 2 and outer loop 3
inner loop value: 3 and outer loop 3
inner loop value: 4 and outer loop 3
inner loop value: 5 and outer loop 3
inner loop value: 6 and outer loop 3
inner loop value: 7 and outer loop 3
inner loop value: 8 and outer loop 3
inner loop value: 9 and outer loop 3
inner loop value: 10 and outer loop 3
outer loop value: 4
inner loop value: 1 and outer loop 4
inner loop value: 2 and outer loop 4
inner loop value: 3 and outer loop 4
inner loop value: 4 and outer loop 4
inner loop value: 5 and outer loop 4
inner loop value: 6 and outer loop 4
inner loop value: 7 and outer loop 4
inner loop value: 8 and outer loop 4
inner loop value: 9 and outer loop 4
inner loop value: 10 and outer loop 4
outer loop value: 5
inner loop value: 1 and outer loop 5
inner loop value: 2 and outer loop 5
inner loop value: 3 and outer loop 5
inner loop value: 4 and outer loop 5
inner loop value: 5 and outer loop 5
inner loop value: 6 and outer loop 5
inner loop value: 7 and outer loop 5
inner loop value: 8 and outer loop 5
inner loop value: 9 and outer loop 5
inner loop value: 10 and outer loop 5
outer loop value: 6
inner loop value: 1 and outer loop 6
inner loop value: 2 and outer loop 6
inner loop value: 3 and outer loop 6
inner loop value: 4 and outer loop 6
inner loop value: 5 and outer loop 6
inner loop value: 6 and outer loop 6
inner loop value: 7 and outer loop 6
inner loop value: 8 and outer loop 6
inner loop value: 9 and outer loop 6
inner loop value: 10 and outer loop 6
outer loop value: 7
inner loop value: 1 and outer loop 7
inner loop value: 2 and outer loop 7
inner loop value: 3 and outer loop 7
inner loop value: 4 and outer loop 7
inner loop value: 5 and outer loop 7
inner loop value: 6 and outer loop 7
inner loop value: 7 and outer loop 7
inner loop value: 8 and outer loop 7
inner loop value: 9 and outer loop 7
inner loop value: 10 and outer loop 7
outer loop value: 8
inner loop value: 1 and outer loop 8
inner loop value: 2 and outer loop 8
inner loop value: 3 and outer loop 8
inner loop value: 4 and outer loop 8
inner loop value: 5 and outer loop 8
inner loop value: 6 and outer loop 8
inner loop value: 7 and outer loop 8
inner loop value: 8 and outer loop 8
inner loop value: 9 and outer loop 8
inner loop value: 10 and outer loop 8
outer loop value: 9
inner loop value: 1 and outer loop 9
inner loop value: 2 and outer loop 9
inner loop value: 3 and outer loop 9
inner loop value: 4 and outer loop 9
inner loop value: 5 and outer loop 9
inner loop value: 6 and outer loop 9
inner loop value: 7 and outer loop 9
inner loop value: 8 and outer loop 9
inner loop value: 9 and outer loop 9
inner loop value: 10 and outer loop 9
outer loop value: 10
inner loop value: 1 and outer loop 10
inner loop value: 2 and outer loop 10
inner loop value: 3 and outer loop 10
inner loop value: 4 and outer loop 10
inner loop value: 5 and outer loop 10
inner loop value: 6 and outer loop 10
inner loop value: 7 and outer loop 10
inner loop value: 8 and outer loop 10
inner loop value: 9 and outer loop 10
inner loop value: 10 and outer loop 10

3. Iterating Arrays with for Loop

Arrays in JavaScript can be iterated using the for loop to access each element sequentially.

let myArray = ["flash", "batman", "superman"];
console.log(myArray.length); //outputs: 3
for (let index = 0; index < myArray.length; index++) {
    const element = myArray[index];
    console.log(element);
}

//outputs: 
//3
//flash
//batman
//superman

Using break Statement

The break statement allows you to exit a loop prematurely based on a condition.

for (let index = 1; index < 20; index++) {
    if (index == 5) {
        console.log("Detected 5");
        break;
    }
    console.log(`Value of i is ${index}`)    
}

//output
value of i is 1
value of i is 2
value of i is 3
value of i is 4
detected 5

Using continue Statement

The continue statement skips the current iteration of a loop and proceeds to the next one.

for (let index = 1; index <= 20; index++) {
    if (index == 5) {
        console.log("Detected 5, skipping this iteration");
        continue;
    }
    console.log(`Value of i is ${index}`)    
}

value of i is 1
value of i is 2
value of i is 3
value of i is 4
detected 5
value of i is 6
value of i is 7
value of i is 8
value of i is 9
value of i is 10
value of i is 11
value of i is 12
value of i is 13
value of i is 14
value of i is 15
value of i is 16
value of i is 17
value of i is 18
value of i is 19
value of i is 20

Conclusion

Understanding JavaScript loops and control flow mechanisms is essential for writing efficient and structured code. for loops, alongside break and continue statements, provide powerful tools for managing program flow and iterating over data structures. By mastering these concepts, you'll be able to handle complex tasks with ease in your JavaScript applications.