Control Flow Statements in JS

Control flow statements control the order in which code is executed.
These statements allow you to make decisions, repeat tasks, and jump between parts of a program based on specific conditions.

if Statement

The if statement executes a block of code only if a specified condition is true.

The following flowchart illustrates how the if statement works:

If the condition is a non-boolean value, JavaScript will coerce it to a boolean value by calling the Boolean() function.

If you have more than one statement to execute, you need to wrap them in a block using a pair of curly braces ({}) as follows:

if (condition) {
  // statements to execute
}

It’s a good practice to always use curly braces with the if statement. This makes your code easier to maintain and helps avoid possible mistakes.

if statement example

The following example uses the if statement to check if the age is equal to or greater than 18:

let age = 18;
if (age >= 18) {
  console.log('You eligible for vote');  // You eligible for vote
}

if…else Statement

The if statement executes a block if a condition is true. When the condition is false, it does nothing.

But if you want to execute a statement if the condition is false, you can use an if...else statement.

Here’s the syntax of the if...else statement:

if( condition ) {
  // ...
} else { 
  // ...
}

In this syntax, the condition is a value or an expression that evaluates to true or false. If the condition is true, the if...else statement executes the block that follows the if branch.

If the condition is false, the if...else statement executes the block that follows the else branch.

Typically, the condition evaluates to a boolean value, which is true or false. However, if it evaluates to a non-boolean value, the if...else statement will convert it to the boolean value.

The following flowchart illustrates how the if...else statement works:

if…else statement example

The following example uses the if...else statement to check if the age is greater than or equal to 18:

let age = 18;

if (age >= 18) {
  console.log('You eligible for vote.');
} else {
  console.log('You must be at least 18 to voting.');
}

// Output: You eligible for vote.

In this example, the age is 18. Therefore, the expression age >= 18 is true. Hence, you’ll see the following message in the console:

The following example is the same as above except that the age is 18 instead of 16:

let age = 16;

if (age >= 18) {
  console.log('You eligible for vote.');
} else {
  console.log('You must be at least 18 to voting.');
}

// Output: You must be at least 18 to voting.

In this example, the age is 16. Therefore, the expression age >= 18 evaluates to false. Hence, the statement in the else branch executes that output the message to the console.

if...else...if Statement

The if an if…else statements accepts a single condition and executes the if or else block accordingly based on the condition.

To check multiple conditions and execute the corresponding block if a condition is true, you use the if...else...if statement like this:

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else if (condition3) {
  //...
} else {
  //...
}

In this syntax, the if...else...if statement has three conditions. In theory, you can have as many conditions as you want to, where each else...if branch has a condition.

The if...else...if statement checks the conditions from top to bottom and executes the corresponding block if the condition is true.

The if...else...if statement stops evaluating the remaining conditions as soon as a condition is true. For example, if the condition2 is true, the if...else...if statement won’t evaluate the condition3.

If all the conditions are false, the if...else...if statement executes the block in the else branch.

The following flowchart illustrates how the if...else...if statement works:

if else if example

The following example uses the if...else...if statement to get the month name from a month number:

let month = 6;
let monthName;

if (month == 1) {
  monthName = 'Jan';
} else if (month == 2) {
  monthName = 'Feb';
} else if (month == 3) {
  monthName = 'Mar';
} else if (month == 4) {
  monthName = 'Apr';
} else if (month == 5) {
  monthName = 'May';
} else if (month == 6) {
  monthName = 'Jun';
} else if (month == 7) {
  monthName = 'Jul';
} else if (month == 8) {
  monthName = 'Aug';
} else if (month == 9) {
  monthName = 'Sep';
} else if (month == 10) {
  monthName = 'Oct';
} else if (month == 11) {
  monthName = 'Nov';
} else if (month == 12) {
  monthName = 'Dec';
} else {
  monthName = 'Invalid month';
}
console.log(monthName);    // Jun

In this example, we compare the month with 12 numbers from 1 to 12 and assign the corresponding month name to the monthName variable.

Since the month is 6, the expression month==6 evaluates to true. Therefore, the if...else...if statement assigns the literal string 'Jun' to the monthName variable. Therefore, you see Jun in the console.

If you change the month to a number that is not between 1 and 12, you’ll see the Invalid Month in the console because the else clause will execute.

https://www.javascripttutorial.net/javascript-if/
https://www.geeksforgeeks.org/javascript/javascript-statements/