Mastering Control Flow in JavaScript: Conditional Statements and Loops Explained

Control flow refers to the order in which a program executes its statements. In JavaScript, conditional statements and loops enable us to manage the flow of a program by making decisions and repeating actions based on certain conditions. In this guide, we’ll explore conditional statements, loops, and how to effectively break out of loops with practical examples.

Conditional Statements

Conditional statements allow you to execute specific blocks of code based on certain conditions.

1. if Statement

The if statement runs a block of code if the given condition evaluates to true.

let age = 18;  
if (age >= 18) {  
  console.log("You are eligible to vote.");  
}  

2. if-else Statement

The if-else statement provides an alternative block of code to execute if the condition is false.

let age = 16;  
if (age >= 18) {  
  console.log("You are eligible to vote.");  
} else {  
  console.log("You are not eligible to vote.");  
}  

3. if-else if-else Statement

When you have multiple conditions, you can use else if to check additional conditions.

let score = 85;  
if (score >= 90) {  
  console.log("Grade: A");  
} else if (score >= 75) {  
  console.log("Grade: B");  
} else {  
  console.log("Grade: C");  
}  

4. switch Statement

The switch statement evaluates an expression and matches it with a case.

let day = 3;  
switch (day) {  
  case 1:  
    console.log("Monday");  
    break;  
  case 2:  
    console.log("Tuesday");  
    break;  
  case 3:  
    console.log("Wednesday");  
    break;  
  default:  
    console.log("Invalid day");  
}  

Loops in JavaScript

Loops are used to execute a block of code repeatedly as long as a condition is met.

1. for Loop

The for loop is best when the number of iterations is known.

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

2. while Loop

The while loop runs as long as the condition is true.

let i = 1;  
while (i <= 5) {  
  console.log(`Iteration: ${i}`);  
  i++;  
}  

3. do-while Loop

The do-while loop ensures the code runs at least once, even if the condition is false.

let i = 6;  
do {  
  console.log(`Iteration: ${i}`);  
  i++;  
} while (i <= 5);  

Breaking Out of Loops

1. break Statement

The break statement exits the loop entirely when a condition is met.

for (let i = 1; i <= 10; i++) {  
  if (i === 5) {  
    break;  
  }  
  console.log(i);  
}  
// Output: 1, 2, 3, 4  

2. continue Statement

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

for (let i = 1; i <= 5; i++) {  
  if (i === 3) {  
    continue;  
  }  
  console.log(i);  
}  
// Output: 1, 2, 4, 5  

Practical Examples

Example 1: Even Numbers

Print all even numbers between 1 and 10 using a for loop.

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

Example 2: Sum of Numbers

Calculate the sum of numbers from 1 to 5 using a while loop.

let sum = 0;  
let i = 1;  
while (i <= 5) {  
  sum += i;  
  i++;  
}  
console.log(`Sum: ${sum}`);  
// Output: Sum: 15  

Example 3: Grading System with switch

let grade = "B";  
switch (grade) {  
  case "A":  
    console.log("Excellent");  
    break;  
  case "B":  
    console.log("Good Job");  
    break;  
  case "C":  
    console.log("Needs Improvement");  
    break;  
  default:  
    console.log("Invalid Grade");  
}  

FAQs

Q1: When should I use a switch instead of if-else?
Use switch when you need to compare a single variable against multiple values. It’s more readable for such cases.

Q2: What is the difference between while and do-while loops?
A while loop checks the condition before running the code, while a do-while loop runs the code at least once before checking the condition.

By understanding control flow, you can write programs that dynamically adapt to different situations and perform repetitive tasks efficiently. Keep practicing, and soon these concepts will become second nature!

Leave a Comment