Welcome to the eighth day of our series on mastering Backend development! In yesterday's blog, we discussed conditional statements in JavaScript, such as the if...else statement and the switch statement. These statements allow us to control the flow of our code by checking for certain conditions and executing different blocks of code depending on the results.

Today, we will be focusing on looping constructs in JavaScript.

Have you ever had to do a task multiple times, such as counting to 10 or copying and pasting something several times in a row? Doing the same task over and over again can be time-consuming and tedious. That's where looping constructs come in handy.

In programming, looping constructs are a type of control flow statement that allows you to execute a block of code repeatedly until a certain condition is met. For example, you can use a loop to go through each item in a list and perform an action on it.

There are several types of loops available in JavaScript, including the for loop, while loop, and do...while loop. In this class, we will learn about these different loops. So, let's get started!

Looping Constructs

Iterative loops, also known as looping statements or looping constructs, allow you to execute a block of code repeatedly until a certain condition is met.

In JavaScript, there are several types of loops that you can use:

1. for loop:

The for loop is one of the most commonly used looping constructs in JavaScript, and it is likely that you will use it frequently in your programming projects.

The for loop is used to execute a block of code a specific number of times. It has the following generalized syntax:

for (initialization; condition; increment) {
  // code to be executed
}

Here's how the code flows in a for loop:

• Step1: The initialization statement is executed before the loop starts. It is usually used to initialize a loop counter.

• Step2: Then condition is checked before each iteration of the loop. If the condition is true, the loop continues to execute. If the condition is false, the loop stops executing.

• Step3: If the condition is true then the code block is executed.

• Step4: Then increment/decrement statement is executed after each iteration of the loop. It is usually used to update the loop counter. and then again it will go to condition (step - 2) checking

• step5: The process repeats until the condition becomes false.

Here's an example of a for loop that counts from 1 to 5:

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

In this example, the initialization statement let i = 1 sets the loop counter i to 1. The condition i <= 5 is checked before each iteration of the loop, and as long as it is true, the loop continues to execute. The code block console.log(i) logs the current value of i to the console. The increment statement i++ increases the value of i by 1 after each iteration.

The output of this loop would be:

1 2 3 4 5

The loop counter i starts at 1 and is incremented by 1 after each iteration of the loop. The loop continues to execute until i becomes greater than 5, at which point the condition i <= 5 is no longer true and the loop stops executing.

You can use the for loop to solve a variety of problems, such as iterating over the elements of an array or object, repeating a process until a specific condition is reached, and more.

The break and continue Statements

The break and continue statements are control flow statements that can be used in loops to alter the normal flow of execution.

break

The break statement is used to exit a loop early, before the loop condition is met. It can be used to break out of a loop when a certain condition is met, or to terminate the loop immediately.

Here's an example of using the break statement to exit a loop when a certain condition is met:

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

In this example, the loop will iterate 10 times, from 1 to 10. However, when the loop counter i reaches 5, the break statement is encountered and the loop is terminated. The output of this loop would be:

1 2 3 4

continue

The continue statement is used to skip the rest of the current iteration of a loop and move on to the next iteration. It can be used to skip over certain elements in an array or to skip a certain number of iterations in a loop.

Here's an example of using the continue statement to skip over certain elements in a list:

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

In this example, the loop iterates from 1 to 10. If the current value of i is even (i.e. divisible by 2), the continue statement is encountered and the rest of the current iteration is skipped. The loop then moves on to the next iteration, starting from the top of the loop again. The output of this loop would be:

1 3 5 7 9

As you can see, the continue statement can be useful for skipping over certain elements in a list or for skipping a certain number of iterations in a loop.

2. while loop

A while loop is a looping construct in JavaScript that is used to execute a block of code as long as a specified condition is true. It has the following syntax:

while (condition) {
  // code block to be executed
}

Unlike the for loop, the initialization, condition, and increment statements are not contained within the loop syntax. Instead, the initialization is typically done before the loop, and the increment statements are included inside the loop.

The condition is checked before each iteration of the loop. If the condition is true, the code block inside the loop is executed. If the condition is false, the loop terminates.

Here is an example of a while loop that counts from 1 to 10:

let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

In this example, the initialization statement let i = 1 sets the loop counter i to 1. The condition i <= 10 is checked before each iteration of the loop, and as long as it is true, the loop continues to execute. The code block console.log(i) logs the current value of i to the console. The increment statement i++ increases the value of i by 1 after each iteration. As a result, the loop will execute 10

3. do...while loop

A do...while loop is similar to a while loop, but the code block is always executed at least once, because the condition is checked after the first iteration of the loop. It has the following syntax:

do {
  // code block to be executed
} while (condition);

The code block inside the loop is executed, and then the condition is evaluated. If the condition is true, the loop continues, and the code block is executed again. If the condition is false, the loop terminates.

Here is an example of a do...while loop that counts from 1 to 10:

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 10);

4. for...in & for...of

The for...in loop is used to iterate over the properties of an object. It has the following syntax:

for (variable in object) {
  // code block to be executed
}

The variable is a variable that takes on the value of each property in the object in turn. The code block inside the loop is executed for each property in the object.

The for...of loop is used to iterate over the values of an iterable object, such as an array or a string. It has the following syntax:

for (variable of iterable) {
  // code block to be executed
}

Both for...in and for...of loops are useful for iterating over collections of data, but they have some key differences. for...in loops iterate over the properties of an object, while for...of loops iterate over the values of an iterable object. In addition, for...in loops can be used with objects, while for...of loops can be used with any iterable object, such as arrays, strings, and maps.

Conclusion

In conclusion, this blog discussed looping constructs in JavaScript, which are control flow statements that allow you to execute a block of code repeatedly until a certain condition is met. We learned about the different types of loops available in JavaScript, including the for loop, while loop, and do...while loop. We also learned about the break and continue statements, which can be used to alter the normal flow of execution in a loop.

Thank you for joining me on this 50-day blogging journey on backend development. I hope you have gained a better understanding of looping constructs and how they can be used to solve problems and automate tasks in your code.