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

What is control Flow?

Somtimes we have to make decisions based on some condition. There can be many examples.
Our life is filled with daily decisions that we make.

Example 1 - Shahi Paneer

Rohan wants to cook shahi paneer. He starts checking for the ingredients in the kitchen.

If ingredients not found then go to supermarket for purchasing ingredients otherwise start cooking.

code example

const isIngredientAvailable = true;

if(isIngredientAvailable){
    console.log('start cooking paneer');
}else{
    console.log('Go to supermarket and purchase ingredients');
}

Example 2 - Macbook vs Windows Laptop

Rohan wants to purchase Laptop for his studies. He checks available savings in his bank account and make the decision whether he purchase mac book or windows laptop.

code example

const bankBalance = 312.04;

if(bankBalance < 500) {
  console.log('Purchase Windows Laptop');
}else{
  console.log('Purchase Macbook');
}

Similarly in JavaScript, we have to execute some piece of code based on some condition. This is called Control Flow because we are controlling the flow of execution that which code should execute or which code should not execute.

IF statement

IF statement has only one option, either somthing happens or not. There is no second choice.

code example

const month = 'Dec';

if (month === 'Dec') {
    console.log('Add Winter discount on website');
}

IF ELSE statement

If-Else statement allows second choice to be executed if first condition fails.

code example

const month = 'Dec';

if (month === 'Dec') {
    console.log('Add Winter discount on website');
}else {
    console.log('Show : Discount not available right now');
}

ELSE IF statement

It is also called Ladder if statement. It is used to check multiple conditions consecutively. If the current condition fails then the next condition is checked and it goes to the last condition.

code example

const month = 'Dec';

if (month === 'Dec') {
    console.log('Add Winter discount on the website');
} else if (month === 'Jan') {
    console.log('Add New Year discount banner');
} else if (month === 'Feb') {
    console.log('Add Valentine special offers');
} else if (month === 'Mar') {
    console.log('Start End of Season Sale');
} else {
    console.log('No special discount this month');
}

SWITCH statement

Switch statement works same as the If-else-if. The only difference is that switch can only compare values with equality(===), not by other operations like greater than(>), less than(<) etc.

syntax

code example

const month = 'Dec';

switch (month) {
    case 'Dec':
        console.log('Add Winter discount on the website');
        break;

    case 'Jan':
        console.log('Add New Year discount banner');
        break;

    case 'Feb':
        console.log('Add Valentine special offers');
        break;

    case 'Mar':
        console.log('Start End of Season Sale');
        break;

    default:
        console.log('No special discount this month');
}

When to use switch and if-else?

When we want to compare the values with equality check then we can use switch, otherwise if-else can be used.