Skip to main content

Command Palette

Search for a command to run...

Control Flow in JS:

If , Else and Switch Explained

Updated
•3 min read•View as Markdown
Control Flow in JS:
S
I like to make complex technical topics easy.

Introduction

umm... on hearing the word Control Flow , what's the first thing your mind clicks ?

You can think it as, flow relates to something like water in lake or sea which flows wherever it finds path and when the word control adds to it , it sounds like something is in flow but it's under control... something like tap water . As the water flows through it but we can control it how fast or slow we want by tap .

That's similar how programming languages work . The code executes line by line in default but sometimes programmer needs to control it's execution according the task needs and this where Control Flow enters .

What does control flow means ?

In JavaScript, control flow is used when the programmer needs to run some piece of code if some given condition fulfils , unless something else will run .

Or we can say, Control flow in programming refers to the order in which a program executes its instructions. It determines which piece of code runs, when it runs, and how many times it runs.

to make decisions , control flow has 3 types -

  • if

  • else

  • switch

The if Statement :

The if statement is used to run the code only when the given condition is true .

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote");
}

The if-else Statement :

The if-else statement is used when two outputs required for both , if the condition is true or false .

let age = 16;

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

The else if Ladder :

The else if ladder is used when there are more than one condition is to be checked .

let score = 85;

if (score >= 90) {
  console.log("Grade A");
} 
else if (score >= 75) {
  console.log("Grade B");
} 
else if (score >= 60) {
  console.log("Grade C");
}
else {
    console.log("Grade D");
}

if or else if statement will run if any of the given condition becomes true otherwise the else statement will run .

The switch Statement :

A switch statement is used when we to execute different block of code based on the value of the expression .

In switch statement , multiple cases or values is compared to the given expression ,and whichever case is matched it's block of code runs .

let day = 2;

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

here,

switch is used to check the value of the given expression ,

cases are used to give different values and whichever matches, it's block of code will execute ,

break are used to stop the checking further if any value matches ,

default keeps the code that runs when no case matches .

switch vs if-else :

if...else is used when we need to check conditions involving comparisons, ranges, or complex logic.

Preferable for :

  • Range checks

  • Multiple conditions

  • Logical operators (&&, ||)

  • Different types of expressions

switch is used when we need to compare one variable against many specific values.

Preferable for :

  • Many exact values

  • Cleaner code instead of many else if

  • Menu selections

  • Status codes