JavaScript if else Statement Tutorial with Examples

The if…else statement in JavaScript is one of the most fundamental control flow structures used to execute code based on conditions.

It allows you to execute a block of code if a specified condition is true and, optionally, another block if the condition is false.

You can also chain multiple conditions using else if.

In this tutorial, you'll learn:

What is an if…else statement?
Basic syntax of if, else, and else if
Nested if…else statements
Using logical operators with if…else
Practical examples of if…else usage

1. What is an if…else Statement?

An if…else statement is a control flow statement that executes code only if a certain condition is met.

The condition is evaluated as either true or false, and based on that result, the corresponding block of code runs.

2. Basic Syntax of if, else, and else if

The syntax of if…else is straightforward:

if Statement

The if statement executes a block of code if the condition evaluates to true.

Syntax:

if (condition) {
  // Code to execute if the condition is true
}

if…else Statement

The else block is optional and will execute if the condition in the if statement evaluates to false.

Syntax:

if (condition) {
  // Code to execute if the condition is true
} else {
  // Code to execute if the condition is false
}

else if Statement

You can chain multiple conditions using else if. It allows you to check additional conditions if the first condition is false.

Syntax:

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition1 is false and condition2 is true
} else {
  // Code to execute if both condition1 and condition2 are false
}

3. Using the if…else Statement

Example 1: Basic if Statement

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

In this example:

If age is greater than or equal to 18, the message “You are an adult.” is printed.
Since age is 18, the condition evaluates to true, and the message is logged.

Example 2: if…else Statement

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

In this example:

If age is greater than or equal to 18, “You are an adult.” is printed.
If not, “You are a minor.” is printed because the else block handles the false condition.

Example 3: Using else if for Multiple Conditions

let score = 85;

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

In this example:

The code checks the value of score and assigns a grade based on the range.
Since score is 85, the “Grade: B” message is printed.

4. Nested if…else Statements

You can nest if…else statements inside other if…else blocks to evaluate more complex logic.

Example 4: Nested if…else Statements

let age = 22;
let hasDrivingLicense = true;

if (age >= 18) {
  if (hasDrivingLicense) {
    console.log("You can drive.");
  } else {
    console.log("You need a driving license to drive.");
  }
} else {
  console.log("You are too young to drive.");
}

In this example:

The outer if checks whether age is at least 18.
Inside the first block, a nested if checks if the person has a driving license.
Depending on the conditions, different messages are printed.

5. Using Logical Operators with if…else

You can combine multiple conditions using logical operators like && (AND) and || (OR).

Example 5: Using Logical AND (&&)

let age = 22;
let hasDrivingLicense = true;

if (age >= 18 && hasDrivingLicense) {
  console.log("You can drive.");
} else {
  console.log("You cannot drive.");
}

In this example:

Both conditions (age >= 18 and hasDrivingLicense) must be true for the “You can drive.” message to be printed.
If either condition is false, “You cannot drive.” is printed.

Example 6: Using Logical OR (||)

let age = 22;
let isStudent = true;

if (age < 18 || isStudent) {
  console.log("You are eligible for a discount.");
} else {
  console.log("You are not eligible for a discount.");
}

In this example:

The discount is applied if either age < 18 or isStudent is true.
Since isStudent is true, the message “You are eligible for a discount.” is printed.

6. Practical Examples of if…else Usage

Example 7: Simple Password Check

let password = "secret123";

if (password === "secret123") {
  console.log("Access granted.");
} else {
  console.log("Access denied.");
}

In this example:

If the password is correct, access is granted; otherwise, it is denied.

Example 8: Time-Based Greetings

let hour = new Date().getHours();

if (hour < 12) {
  console.log("Good morning!");
} else if (hour < 18) {
  console.log("Good afternoon!");
} else {
  console.log("Good evening!");
}

In this example:

The program checks the current hour and displays a time-appropriate greeting.

Example 9: Checking for a Valid Number

let num = "abc";

if (typeof num === "number" && !isNaN(num)) {
  console.log("This is a valid number.");
} else {
  console.log("This is not a valid number.");
}

In this example:

The code checks if num is a number and whether it’s not NaN (Not-a-Number).

Conclusion

The if…else statement is an essential control flow tool in JavaScript, allowing you to execute different code blocks based on various conditions.

Here’s a summary of what you’ve learned:

if executes a block of code if the condition is true.
else executes a block of code if the if condition is false.
else if allows you to check multiple conditions.
Logical operators like && (AND) and || (OR) can be used to combine conditions.
Nested if statements help you handle more complex logic.

By using these concepts, you can write flexible and dynamic programs that respond to a variety of conditions.