DEV Community

Cover image for JavaScript Loops and Conditional Statements: Controlling Program Flow
Shaikh AJ
Shaikh AJ

Posted on

JavaScript Loops and Conditional Statements: Controlling Program Flow

Introduction:
In JavaScript, loops and conditional statements are essential for controlling the flow of a program. They enable you to execute code repeatedly or selectively based on specific conditions. Understanding how to use loops and conditional statements effectively is crucial for building robust and dynamic applications. In this article, we will delve deep into JavaScript loops and conditional statements, providing detailed explanations and examples to illustrate their usage.

Types of Loops:
JavaScript offers several types of loops, each serving different purposes and scenarios. Let's explore three commonly used loops:

1. The for Loop:
The for loop is used when you know the number of iterations in advance. It consists of three parts: initialization, condition, and increment/decrement. Here's an example:

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

Output:

1
2
3
4
5
Enter fullscreen mode Exit fullscreen mode

Explanation:
In this example, the loop initializes i to 1. It executes the code block as long as i is less than or equal to 5. After each iteration, i is incremented by 1. The loop terminates when i becomes 6.

2. The while Loop:
The while loop is used when you don't know the number of iterations in advance. It repeats a block of code as long as a condition is true. Let's print the numbers from 1 to 5 using a while loop:

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}
Enter fullscreen mode Exit fullscreen mode

Output:

1
2
3
4
5
Enter fullscreen mode Exit fullscreen mode

Explanation:
In this example, the loop starts with i initialized to 1. As long as i is less than or equal to 5, the code block inside the loop is executed. After each iteration, i is incremented by 1. The loop stops when i becomes 6.

3. The do...while Loop:
The do...while loop executes the code block first and then checks the condition. It ensures that the code block runs at least once, even if the condition is initially false. Let's print the numbers from 1 to 5 using a do...while loop:

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
Enter fullscreen mode Exit fullscreen mode

Output:

1
2
3
4
5
Enter fullscreen mode Exit fullscreen mode

Explanation:
In this example, the code block inside the loop is executed first. Then, the condition i <= 5 is checked. If the condition is true, the loop continues, and i is incremented by 1. The loop terminates when i becomes 6.

Conditional Statements:
JavaScript provides conditional statements that allow you to make decisions in your code based on specific conditions. Let's explore a few commonly used conditional statements:

1. The if Statement:
The if statement executes a block of code if a specified condition is true. Let's check if a number is positive:

let number = -5;
if (number > 0) {
  console.log("The number is positive.");
}
Enter fullscreen mode Exit fullscreen mode

Output:
No output (since the condition is false)

Explanation:
In this example, the condition `number >

0 is evaluated. If it is true, the code block inside the if statement is executed. However, since -5 is not greater than 0, the code inside the if` block is not executed.

2. The if...else Statement:
The if...else statement extends the if statement by providing an alternative block of code that is executed if the condition is false. Let's check if a number is positive or negative:

let number = -5;
if (number > 0) {
  console.log("The number is positive.");
} else {
  console.log("The number is negative.");
}
Enter fullscreen mode Exit fullscreen mode

Output:

The number is negative.
Enter fullscreen mode Exit fullscreen mode

Explanation:
In this example, the condition number > 0 is evaluated. Since -5 is not greater than 0, the code block inside the else statement is executed, and "The number is negative." is printed.

3. The switch Statement:
The switch statement allows you to perform different actions based on different conditions. Let's determine the day of the week based on a given number:

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  default:
    console.log("Invalid day");
}
Enter fullscreen mode Exit fullscreen mode

Output:

Wednesday
Enter fullscreen mode Exit fullscreen mode

Explanation:
In this example, the value of day is 3. The switch statement checks each case and compares it with the value of day. When the value matches 3, the code block inside the corresponding case is executed. Therefore, "Wednesday" is printed. If none of the cases match, the code block inside the default statement is executed, printing "Invalid day" (which is not applicable here).

Conclusion:
Loops and conditional statements are powerful tools in JavaScript that allow you to control the flow of your programs. By understanding the different types of loops and mastering conditional statements, you can build dynamic and responsive applications. In this article, we explored for, while, and do...while loops for repetitive execution and if, if...else, and switch statements for making decisions based on conditions. With these tools in your arsenal, you can write more efficient and flexible JavaScript code.

Top comments (0)