Control Flow In JavaScript

What is Control Flow

Control flow is refers to the order in which statements are executed within the program. While program typically follow sequential flow from top to bottom, but there will be time when you want to execute a specific part of code or specific set of code only if some condition is met. For that purpose the control flow become necessary.

The if Statement

lets assume that you have to create a voting system, and you want that the user should only be able to vote if voters age is greater than or equal to 18 . For this you need if statement.

let age = 21;
if(age >= 18) {
    console.log("Thanks for voting.")
}

Using if statement you can check some specific condition and if that condition returns true, then the code inside the if block gets executed

Else Statement

if the if conditions fails then the expression or logic inside the else block get executed.

let age = 15;
if(age >=18) { // false 
console.log("Thanks for voting");
} else { // so this will execute.
 console.log("Sorry you cannot vote ");
}

In the above code snippet age = 15 and the if condition says that age must be greater than or equal to 18 making the condition false thus the code inside the else block will be executed giving the output

Sorry you cannot vote

else if statement

when you want to check multiple conditions, we use else if

Syntax

if (condition1) {
  // block 1
} else if (condition2) {
  // block 2
} else {
  // default block
}

let marks = 75;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 70) {
  console.log("Grade B");
} else if (marks >= 50) {
  console.log("Grade C");
} else {
  console.log("Fail");
}
// Output : Grade B

The program checks conditions one by one until one on the condition becomes true.

Switch Statement.

The switch statement is used when we need to compare one value against many possible options.
It often cleaner than writing lots of else if statements.

// Syntax  of Switch
switch (expression) {
  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // fallback code
}

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");
}
// output : Wednesday

Explanation :

• The value of day is 3

• It matches case 3

• The corresponding code runs.

break : If we don't use break statement the JavaScript will continue executing the next cases even after it get the matched case.

Example.

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("Apple selected");

  case "banana":
    console.log("Banana selected");
}
// Output 
// Apple selected
// Banana selected

This happens because execution falls through to the next case.

Using break prevents this.

Feature	if...else	switch
Best for	Complex conditions	Fixed values
Comparisons	Any logical condition	Equality check
Readability	Good for few conditions	Better for many values

Real World Example Of Switch Case

let role = "admin";
// look for admin 
switch (role) {
  case "admin": // Found admin
    console.log("Full access"); // Execute this line  
    break;

  case "editor":
    console.log("Edit content");
    break;

  case "viewer":
    console.log("Read only access");
    break;

  default:
    console.log("No access");
}