Javascript If...Else...If else Statements

Conditional statements allow you to control the flow of your program's execution based on different conditions.

if condition checks a specific condition, and based on the evaluation of this condition, we make a specific decision.

If the condition evaluates to true, certain commands or code will be executed.

If the condition evaluates to false, other commands or code will be executed.

If statement

Syntax

javascript
1
2
3
          if (condition) {
    // code to execute if condition is true
}

To create an if statement, we begin by writing the if keyword followed by parentheses. Inside these parentheses, we place the condition we want to check. Then, we create curly brackets and write the commands or code we want to execute if the condition is true.

Look at the following example

javascript
1
2
3
          if (5 > 3) {
    console.log('5 greater than 3');
} // Output: 5 greater than 3
  • In this example, we created an if statement to check a specific condition, which is (5 is greater than 3).
  • Since the condition is true, it executed the code inside the curly brackets, which is printing (5 greater than 3) in the console.

Look at the following example

javascript
1
2
3
          if (3 > 5) {
    console.log('5 greater than 3');
}
  • In this example, we created an if statement to check a specific condition, which is that (3 is greater than 5).
  • Because the condition is false, it returned nothing.

Adding an else statement

The else statement is used in conjunction with an if statement to provide an alternative block of code to execute when the if condition is false.

Syntax

javascript
1
2
3
4
5
          if (condition) {
    // code to execute if condition is true
} else {
    // code to execute if condition is false
}

After the if statement, we write the else keyword followed by curly brackets and write the commands or code we want to execute if the condition is false.

Look at the following example

javascript
1
2
3
4
5
6
7
          if (3 > 5) {
    console.log('5 greater than 3');
} else {
    console.log('3 less than 5');
} 

// Output: 3 less than 5
  • In this example, we created an if statement to check a specific condition, which is (3 is greater than 5).
  • Because this condition is false, it didn't execute the block of code inside the curly brackets following the if statement.
  • So it moved to the else statement and executed the block of code inside the curly brackets following the else statement.

Look at the following example

javascript
1
2
3
4
5
6
7
8
9
          let age = 12;

if (age > 11) {
    console.log('You are an adult');
} else {
    console.log('You are a child');
}

// Output: You are an adult
  • In this example, we created a variable named age with the value of 12.
  • Then, we created an if statement to check the condition (age > 11).
  • This condition is true because the value of the variable age is 12. Since 12 is greater than 11, we find that it executed the block of code inside the curly brackets following the if statement.

Else if statment

If you want to check more than one condition, you can follow the following syntax:

javascript
1
2
3
4
5
6
7
          if (condition1) {
    // code to execute if condition1 is true
} else if (condition2) {
    // code to execute if condition2 is true (and condition1 was false)
} else {
    // code to execute if all conditions are false
}

To place more than one condition within an if statement.

  • We start by writing the if keyword followed by parentheses. We place the condition we want to check inside these parentheses. We then create curly brackets and write inside them the commands or code we want to execute if this condition is true.
  • We then write the else if keyword followed by parentheses and place inside these parentheses the second condition we want to check. We then create curly brackets and write inside them the block of code we want to execute if the second condition is true.
  • Then, at the end, we write the else keyword followed by curly brackets, and inside it, we write the commands or code we want to execute if all conditions are false.

How it works:

  • JavaScript checks condition1 first.
  • If condition1 is true, it runs that block and skips the rest.
  • If condition1 is false, it moves to else if and checks condition2.
  • If none of the if or else if conditions are true, the else block will run.

Look at the following example

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
          let score = 85;

if (score >= 90) {
  console.log('A grade');
} else if (score >= 80) {
  console.log('B grade');
} else if (score >= 70) {
  console.log('C grade');
} else {
  console.log('Fail');
}

// Output: B grade

Since score is 85, it prints "B grade".

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          let username = "admin";
let password = "1234";

if (username === "" || password === "") {
  console.log("Please enter both username and password.");
} else if (username !== "admin") {
  console.log("Username is incorrect.");
} else if (password !== "1234") {
  console.log("Password is incorrect.");
} else {
  console.log("Login successful!");
}

// Output: Login successful!
  • It checks if the username or password is empty.
  • If not empty, it checks if the username is wrong.
  • If the username is correct, it checks if the password is wrong.
  • If everything is correct, it logs "Login successful!".
javascript
1

Nested if

It is placing an if statement inside another if statement to check another condition if the first condition is true.

It allows for more complex decisions.

Look at the following example

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          let age = 25;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("You are eligible to drive.");
    } else {
        console.log("You need a license to drive.");
    }
} else {
    console.log("You are not old enough to drive.");
}

// Output: You are eligible to drive.

In this example

  • If the person is 18 or older, the program then checks if they have a license.
  • If they have a license, it prints "You are eligible to drive." If not, it prints "You need a license to drive."
  • If the person is younger than 18, it prints "You are not old enough to drive."

Look at the following example:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
          let temperature = -4;
let isRainy = false;

if (temperature < 0) {
    console.log('The weather is bad');

    if (isRainy) {
        console.log('It is raining today');

    } else {
        console.log('It is not rainy');
    }

} else {
    console.log('The weather is good');
}

// Output:
// The weather is bad
// It is not rainy

In this example, we created a variable named temperature with a value of -4 and another variable named isRainy to determine whether the weather is rainy or not. The condition evaluated to true, meaning it is rainy. We created an if statement to check (temperature < 0). We found that this condition was true, so it executed the commands inside the curly brackets following the if statement. While executing the commands, we found that the if statement checked (isRainy).

If the condition evaluated to true, it executed the commands inside the curly brackets following the if statement.

If the condition evaluated to true, it executed the commands inside the curly brackets following the if statement. If the condition evaluated to false, it executed the commands inside the curly brackets following the else statement.

Look at the following example:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
          let temperature = -4;
let isRainy = false;

if (temperature > 0) {
    console.log('The weather is bad');

    if (isRainy) {
        console.log('It is raining today');
    } else {
        console.log('It is not rainy');
    }

} else {
    console.log('The weather is Good');
}

// Output:
// The weather is Good

In this example, if checks for (temperature > 0), and this condition is false because the temperature is equal to -4, and -4 is less than 0, so the condition is evaluated as false. This results in an error in the code inside the curly brackets of if and executes the code inside the curly brackets of else.