Control Flow in JavaScript: If, Else and Switch Explained

Introduction to Control Flow

Control flow determines the order of the code in which they are going to be executed. While code runs line by line but control flow structure code execution by conditional and loops which make decision, repeat action and change execution path.

Control flow consist of three components -

1. Conditional Statements :- The code execution happens after passing through a condition. Example - if, if-else, else-if, switch.

2. Loop Statements :- Repeating the execution of a block of code. Example - for, while, do-while.

3. Jump Statements :- Keywords which interrupt the pattern of code execution. Example - break, continue, and return.

The `if` statement

In this case, the block of code will be executed after satisfying the condition.

// Syntax

if(condition) {
    // code block
}

Example -

let age = 20;

if(age >= 18) {
    console.log("You are adult.")
}

// Output:-
// You are adult.

Here, the age is 20 which is a greater number than 18. The condition is that age should be greater than 18. This satisfy the condition. Hence, the block of code will be executed.

The `if-else` statement

In this case, there are two different block of code. The execution will happen only for one block of code after passing through a condition.

// Syntax 

if(condition) {
  // Code block
}
else {
  // Code block
}

Example -

let age = 21;

if(age >= 18) {
    console.log("You can vote.");
} else {
    console.log("You can not vote.");
}

// Output :-
// You can vote.

Here, there are two different block of code and one block will be executed. In this case, the condition is satisfied on age 21 then the output is "You can vote." which was in code block.

The `else if` statement

In this case, we mulltiple block of code and condition. So we will execute only one code block after the passing through condition and only one condition will be satisfied.

// Syntax

if (condition1) {
  // Code block
}
else if (condition2) {
  // Code block
}
else if (condition3) {
  // Code block
}
else {
  // Code block
}

Example -

let age = 25; 

if(age <= 12) {
    console.log("You are a child.");
} else if(age <= 18) {
    console.log("You are an adolescent.");
} else {
    console.log("You are an adult.");
} 

// Output :-
// You are an adult.

Here, there are two condition and three different block of code. Only one block of code will be executed after passing through all the condition and satisying one codition. That is why, output is "You are an adult." which satisfy else condition.

The `switch` statement

In this case, we will have multiple condition and we want only one condition to satisfy then that code block should be executed.

It is the alternative of else-if statement.

// Syntax 

switch (expression) {
    case condition1 : 
        // code block 
        break;
    case condition2 :
        // code block
        break;
    case condition3 :
        // code block
        break;
    default:
        // coe block
}

Example -

let day = "Sunday";

switch(day) {
    case "Monday":
        console.log("It is the first working day.")
        break;
    case "Tuesday":
        console.log("It is the fast working day.")
        break;
    case "Wednesday":
        console.log("It is the distracting working day.")
        break;
    case "Thursday":
        console.log("It is the normal working day.")
        break;
    case "Friday":
        console.log("It is the second last day.")
        break;
    case "Saturday":
        console.log("It is the last day.")
        break;
    default:
        console.log("It is funday.");
        break;
}

// Output :-
// It is funday.

Here, the condition of case gets satisfy after passing the regular expression. Then the code is executed and output is "It is funday.".

When to use switch vs if-else

Switch case -

When you want to check single expression (of single and fixed value) among multiple condition then switch case is used.

if-else ladder -

When you want to check highly complex and diverse condition then if-else ladder is used.