Mastering JavaScript if...else Statements - Control Program Flow with Conditionals

Discover how to control the flow of your JavaScript code using if...else statements. Learn about the different types, including if, if else, and else if statements, to create dynamic, responsive applications.

JavaScript if...else Statements

JavaScript includes if/else conditional statements to control program flow, similar to other programming languages. There are three main types of if-else statements in JavaScript:

• if Statement
• if else Statement
• else if Statement

if Statement

The if statement is used to execute code based on a condition.

Syntax

if (boolean expression) {
    // code to execute if the condition is true
}

Example: if Condition

In the following example, an alert displays if the condition is true:

if (2 > 1) {
    alert("2 is greater than 1");
}

if (2 < 1) {
    alert("2 is less than 1");
}

Displays: 2 is greater than 1

Using Variables in if Condition

You can use variables within a conditional expression:

var myScore = 85;
var yourScore = 70;

if (myScore > yourScore) {
    alert("My score is higher than yours");
}

Note:

• Curly braces { } are optional if the if block contains only a single line of code.
• Use comparison operators carefully, as == and === work differently.

if (1 == "1") {
    alert("== operator ignores type of operands");
}

if (1 === "1") {
    alert("=== operator considers type of operands");
}

else Condition

The else statement executes if the if condition is false.

Syntax

if (condition expression) {
    // code to execute if condition is true
} else {
    // code to execute if condition is false
}

Example: else Condition

The following example demonstrates the else condition:

var myAge = 20;
var legalAge = 18;

if (myAge < legalAge) {
    alert("You are underage.");
} else {
    alert("You are of legal age.");
}

else if Condition

The else if statement provides an additional condition if the initial if statement is false.

Syntax

if (condition expression) {
    // code block to execute if condition is true
} else if (condition expression) {
    // code block to execute if previous condition is false and this one is true
}

Example: else if Condition

The following example shows how to use multiple conditions with else if:

var temperature = 30;

if (temperature > 35) {
    alert("It's a hot day.");
} else if (temperature > 20) {
    alert("It's a warm day.");
} else {
    alert("It's a cool day.");
}

Points to Remember

• Use if-else statements to control program flow based on conditions.
• JavaScript has three main forms of if condition: if, if else, and else if.
• The if condition requires a conditional expression in parentheses () and a code block wrapped in curly braces { }.
• The else if statement must follow an if condition, and you can use it multiple times.
• The else statement can only be used once at the end and follows the last if or else if statement.

We will explore the switch case statement in the next section.