Control Flow in JavaScript: If, Else, and Switch Explained

Welcome to a new article. In this article we will learn about the control flow in JavaScript. So let's get started.

What control flow actually means in programming

Before jumping into control flow, let's first understand what control flow actually means in any programming language. Suppose you are cooking something, and when the food is about to cook, you need to add something tangy according to the recipe. For the tanginess, you can add either lemon juice or dry mango powder. But you can only add dry mango powder if lemon juice is not available. So whether to add dry mango powder or not is conditional. Control flow is also the same. Control flow means executing a piece of code in a particular condition. In JavaScript we have different control flow statements, which we are discussing below.

IF Statement

Suppose you have written a code that tells whether a person has passed or failed an exam by checking its percentage. So you can use an IF statement and give a condition there.

let percentage = 40; // Percentage Initialized

if (percentage > 36) {
    console.log('Student passed the exam');
}; // Checking Passing Condition

if (percentage <= 36) {
    console.log('Student failed the exam');
} // Checking Failing Condition

IF-ELSE Statement

With the use of IF-ELSE, we can check if the condition given is true or not. If it's true, the code written in IF will be executed. If the condition fails, then the code written in the ELSE block will be executed. So what to do when the condition passes and what to do when the condition fails, we have defined in a single control flow statement using the IF-ELSE statement.

let percentage = 20; // Percentage Initialized

if (percentage > 36) {                     // Passing Condition
    console.log('Student passed the exam'); 
} else {                                   // Passing condition fails
    console.log('Student failed the exam');
};

IF-ELSEIF Statement

With the use of if...else if, we can run different codes with different conditions. Suppose you want to write a code that can give grades based on different percentage ranges. You can use a if...else if statement here and can also give a default code to do if nothing matches.

let percentage = 50;

if (percentage <= 36) {
    console.log('Grade - F');
} else if (percentage > 36 && percentage <= 50 ) {
    console.log('Grade - E');
} else if (percentage > 50 && percentage <= 60) {
    console.log('Grade - D');
} else if (percentage > 60 && percentage <= 70) {
    console.log('Grade - C');
} else if (percentage > 70 && percentage <= 80) {
    console.log('Grade - B');
} else {
    console.log('Grade - A');
};

Switch Statement

The switch statement is used when you want to run a piece of code based on the value of a single expression. Suppose you have an input where there can be a number between 0 and 6, and you need to print the day name where 0 = Sunday and 6 = Saturday, and if the value is out of the range of 0 to 6, then print Invalid Day Number. Also use a break statement inside each case so that if anything gets true, it does not check further.

let dayNumber = 5;

switch(dayNumber){
    case 0: 
        console.log('Sunday');
        break;
    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;
    case 6: 
        console.log('Saturday');
        break;
    default:
        console.log('Invalid Day Nunmber');
}