Control Flow in JavaScript: if, Else and Switch Explained

Control Flow in JavaScript: if, Else and Switch Explained

Control flow means the order in which a program’s code runs. It decides which instructions first, next, or not at all, based on conditions and loops. Control flow helps a program make decisions, repeat tasks.

Conditional Statements

Conditional statements helps us make decisions in javaScript. They allow the program to execute different code based on certain conditions.

For example, if it’s raining, we take an umbrella, if it’s sunny, we wear sunglasses. This is how conditional statements work in programming.

Types of Conditional Statements in JavaScript

1. if Statement

The if statement is used to check a special condition. When the condition is true, the statements inside the if block are executed. If the condition is false, the statements inside the if block are not executed.

Syntax

if (condition) {
   // Code to execute if the condition is true
}

Example : Checking User Authentication

let username = "admin";
let password = "admin@123";
if(username === "admin" || password === "admin@123"){
    console.log("Authentication successful. Welcome admin");
}

This code checks if the username is "admin" or the password is "admin@123". If either condition is true, it logs "Authentication successful. Welcome admin" to the console.

2. if...else Statement

The if-else statement is used to check a special condition. When the condition is true, the statements inside the if block are executed. If the condition is false, the statements inside the else block are executed.

Syntax

if (condition) {
   // Code runs if condition is true
} else {
   // Code runs if condition is false
}

Example : Checking Internet Connection

let isConnected = false;

if (isConnected) {
    console.log("You are online!");
} else {
    console.log("No internet connection. Check your WiFi.");
}

This code checks if the internet is connected. If isConnected is true, it logs "You are online!", otherwise, it advises checking the WiFi.

3. if...else if...else Statement

The else if statement is used when multiple conditions need to be checked sequentially. If the first if condition is true, it’s block executes. If it is false, the program checks the else if condition. If an else if condition is true, it’s block executes. If none of the conditions are true, the else block (if present) executes.

Syntax

if (condition1) {
   // Runs if condition1 is true
} else if (condition2) {
   // Runs if condition1 is false but condition2 is true
} else {
   // Runs if both conditions are false
}

Example : Grading students based on their marks

let marks = 85;

if (marks >= 90) {
    console.log("Grade: A");
} else if (marks >= 75) {
    console.log("Grade: B");
} else {
    console.log("Grade: C");
}
// output: Grade: B

This code checks the marks and assigns a grade. If marks are 90 or above, it assigns "Grade: A"; if 75 or above, it assigns "Grade: B"; otherwise, it assigns "Grade: C".

4.Nested if...else Statement

The nested if-else statement is an if-else statement inside another if or else block. It is used when one condition depends on another condition. If the outer if condition is true, the inner if-else condition is checked. If the outer if condition is false, the outer else block executes.

Syntax

if (condition1) {
    if (condition2) {
        // Code executes if both condition1 and condition2 are true
    } else {
        // Code executes if condition1 is true but condition2 is false
    }
} else {
    // Code executes if condition1 is false
}

Example: Checking Eligibility for a Bank Loan

let age = 25;
let creditScore = 750;

if (age >= 18) {
    if (creditScore >= 700) {
        console.log("You are eligible for a loan!");
    } else {
        console.log("Improve your credit score to qualify.");
    }
} else {
    console.log("You must be at least 18 to apply for a loan.");
}

This code checks if a person is 18 or older. If true, it then checks if their credit score is 700 or higher to approve the loan; otherwise, it suggests improving the credit score. If the person is under 18, it directly denies the loan.

5. switch Statement

The switch statement is used to execute one block of code from multiple options based on a specific value. It compares the given expression with multiple case values. If a match is found, the corresponding block executes. If no match is found, the default block (if present) executes. The break statement is used to stop further execution after a matching case.

Syntax

switch (expression) {
    case value1:
        // Code for value1
        break;
    case value2:
        // Code for value2
        break;
    default:
        // Code if no cases match
}

Example : Detecting Traffic Light Signals

let signal = "red";

switch (signal) {
    case "red":
        console.log("Stop!");
        break;
    case "yellow":
        console.log("Get ready!");
        break;
    case "green":
        console.log("Go!");
        break;
    default:
        console.log("Invalid signal.");
}

Checks the traffic light color and prints whether to stop, get ready, or go.

Conclusion

  • if → For a single condition

  • if...else → For two possible outcomes

  • if...else if...else → For multiple conditions

  • switch → When checking multiple fixed values.