Control Flow in JavaScript.

What Control Flow means in programing.

• First, let’s understand what problem statement led to the need for control statements.

• Suppose you are building a voting app. In that app, you need to check a condition: if the person who wants to vote is 18 years old or older. Then they able to vote . If the person is not 18 or above, then they should not be allowed to vote.

• Now the question is, how do we solve this problem?.

• If a user enters their age, we first check whether the user’s age is 18 or greater. If it is, then the user can vote. Otherwise, the user cannot vote.

• So from this problem, you can understand that we are trying to control the execution of our code, and that is why it is called a control statement.

• You can also understand it in another way. For example, when we have a result, we may want to evaluate it based on a condition, such as checking whether a student passed or failed. Similarly, if we have a student’s marks, we may want to determine which grade the student should receive based on those marks.

• So overall, the idea is that we can control the execution of our program based on conditions.

• Inside control statements, we have different types of statements, and with their help we can check conditions. Now let’s look at them one by one.

The if statements.

• In an if statement, there is a single block of code where you provide a condition. Whatever condition you write will be checked first. If the condition is true, then the code inside the block will execute. Otherwise, it will not execute because the condition is false.

• So the code inside the if statement will only run when the condition is true.

• Now let's look at a code example, then you will understand it better.

• let marks = 45;
  
  if(marks > 33) {
   console.log("You are passed");
  }
  

  But there are one problem , if if the statement become false then if statement code block not execute , but it is important to show message to why condtion failed , but in this if statement it is not possible , so solve this kind of problem we have next control statement. let see..

The if-else statements.

• Now in this statement we have two block of code. when given condition become true then if block statement code will be execute, if condition become false then else statement code will be execute and print the output. So this statement solve above problem we are discussed in above if statement.

• let age = 16;
  
  if(age >= 18){
   console.log("You are able to vote");
  } else { // if it is not true then else code block execute.
   console.log("Not able to vote");
  }
  

  If the condition in if statement true then the if statement block code execute and else statement code terminate or ignore, but if in case if statement code condition become false then else block code will be execute.

• But there are one more problem here we're check only one condition at a time , what we do when we want to check condition multiple time in one block, so to solve this problem we have one more control statement , so let's discuss about it in next part

The else-if ladder.

• In this statement, we have one value that we need to check against multiple conditions. If any condition becomes true, then that block will execute; otherwise, else code will be execute.

• To do this, we use the else if ladder statement. If the condition in the if part is false, then the program moves to the next else if block to check the next condition.

• Let’s understand this through a code example, then you will understand it better.

• let marks = 60;
  
  if(marks >= 90){
   console.log(`A Grade`);
  } else if(marks >= 80 && marks < 90){
      console.log(`B Grade`);
  } else if(marks >= 60 && marks < 80){
      console.log(`C Grade`);
  } else if(marks >= 40 && marks < 60){
      console.log(`D Grade`);
  } else {
    console.log(`Fail`);
  

  With above code example hope you will understand it .

The switch statements.

In a switch statement, we have multiple cases, which means multiple conditions. If any one case becomes true, it executes that case and returns the result. After that, the execution stops there and it does not move to the next code.

So you can see that this is a better approach than using multiple conditions with an if-else statement. Below is the code of the switch statement; you can look at it.

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");
}

When to switch vs if-else.

• Now let's understand how switch is better. In an if-else statement, you check the condition in every if statement and write the condition again and again. Because of this, the readability of the code becomes lower and it does not look good.

• A switch statement makes this easier because it keeps the conditions in cases. If the condition in a case becomes true, it prints that result and returns it. Otherwise, it jumps to the next code until a condition becomes true. If all the conditions are false, then the default statement is returned.

• Below I have written the code for both, and you can look at it and understand which approach is better.

• // If else statement code .
  
  let color = "red";
  
  if (color === "red") {
    console.log("Stop");
  } else if (color === "yellow") {
    console.log("Wait");
  } else if (color === "green") {
    console.log("Go");
  }
  

// Switch statement code

let color = "red";

switch (color) {
  case "red":
    console.log("Stop");
    break;

  case "yellow":
    console.log("Wait");
    break;

  case "green":
    console.log("Go");
    break;
}

• Now you can see it properly and figure out which one is better for write code when we have a multiple condition to check.