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

When writing real-world applications, the need to take a specific action under a specific condition often arises. For this very purpose, the concept of control flow is a building block of JavaScript and of all other programming languages.

Let say , you are writing a application where you need to decide whether the user can vote or not based on user’s age. The condition is: if user is older than 18 years, only then he/she can vote. This is a very simple use case of Control flow.

In JavaScript, several control flow structures help us manage program decisions.

1. The if statement

2. The if-else statement

3. The else if ladder

4. The switch statement

1. The if statement

If you are above 18 years only then you can vote.

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

2. The if-else statement

If you are over 18 years. Then only you can vote. Otherwise you cannot vote.

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

3. The else if ladder

If any of the conditions is true, that particular block is executed. Hence after one of the block is executed, rest conditions are not checked.

if(age<5) {
	console.log("You are a baby.")
}else if(age<13) {
	console.log("You are a kid.")
}else if(age<20) {
	console.log("You are a teenager.")
}else if(age<60) {
	console.log("You are an adult.")
}else {
	console.log("You are a senior citizen.")
}

4. The switch statement

• The switch statement is useful when a variable is compared against multiple possible fixed values.

• Instead of writing many else if conditions, switch provides a cleaner structure.

let num1 = 10;
let num2 = 5;
let operator = "+"; // change this to -, *, /, %

let result;

switch (operator) {
  case "+":
    result = num1 + num2;
    break;

  case "-":
    result = num1 - num2;
    break;

  case "*":
    result = num1 * num2;
    break;

  case "/":
    result = num1 / num2;
    break;

  case "%":
    result = num1 % num2;
    break;

  default:
    console.log("Invalid operator");
}

console.log("Result:", result);

//Output:  15

Why break Is Important

Each case must end with a break.

Without it, execution continues into the next case, which is called fall-through.

When to Use switch vs if...else

Use if-else when:

• Conditions involve ranges or logical expressions

• Comparisons are not fixed values

Example:

if (temperature>30) {
console.log("Hot day");
}

Use switch when:

• A variable must match one of many specific values

• The structure becomes cleaner than multiple else if

Example:

switch (day) {
		case1:
		case2:
		case3:
		case4:
		case5:
			console.log("Weekday");
			break;

case6:
case7:
			console.log("Weekend");
}

Example 1: Positive, Negative, or Zero

let num=-5;

if (num>0) {
console.log("Positive number");
}else if (num<0) {
console.log("Negative number");
}else {
console.log("Zero");
}

Here we used if-else ladder because the conditions involve comparisons and ranges, not fixed values.

---

Example 2: Day of the Week Using switch

let day=4;

switch (day) {
case 1:
console.log("Monday");
break;

case 2:
console.log("Tuesday");
break;

case 3:
console.log("Wednesday");
break;

case 4:
console.log("Thursday");
break;

case 5:
console.log("Friday");
break;

case 6:
console.log("Saturday");
break;

case 7:
console.log("Sunday");
break;

default:
console.log("Invalid day");
}

Here switch is appropriate because the value of day matches one of several fixed options.

Key Takeaways

• Control flow allows programs to make decisions based on conditions.

• The if statement executes code only when a condition is true.

• The if-else statement provides an alternative path when the condition is false.

• The else if ladder helps handle multiple conditions.

• The switch statement is useful when comparing a variable with several fixed values.

• The break statement prevents fall-through in switch cases.