How many ifs do you encounter everyday?

So in the previous chapter we said that booleans are involved in checking for conditions.

These conditions in Javascript and many other programming languages, can be attached to the if statement. We say "can" because there are other places also where conditions can be specified like the switch statement, the ternary operator etc.

This chapter goes on to explore the if .. else if .. else statements, so let's take the ride.

The if statement

Times come when you want code to execute only after "some condition" is met. The if statement can be handy in these times.
If you are completely new to the if statement and having a hard time understanding what's happening over here consider viewing our explanation of if and else statements with real life examples.
if (conditionToTest) {
    // Code here executed when conditionToTest is true
}
Where conditionToTest is the condition to test for.

- If it evaluates to true the code inside the if block is executed.
- If it evaluates to false the next else if or else block is approached if there is any.

Number example

Running the following code will output Congrats! because the var num is less than 18 and hence the specified condition is met.
var num = 12;

if (num < 18) {
    console.log("Congrats!");
}
So therefore if the condition specified in the if statement is met its underlying block of code is executed, which in this case is console.log("Congrats!")

But what if the var num is greater than or equal to 18 i.e the condition specified in the if statement isn't met? Here is where the else and else if statements play their role.

The else if statement

Use the else if statement if you want to test for another condition after the failure of the if statement.
else if (anotherConditionToTest) {
    // Code here executed when anotherConditionToTest returns true
}
Where anotherConditionToTest is the condition to test for in case the if statement fails.

- If it evaluates to true the underlying code block is executed.
- If it evaluates to false the next else if or else block is approached if there is any just like the if statement

The following code will output Just made it! (not Congrats!)
var num = 25;

if (num < 18) {
    console.log("Congrats!");
}
else if (num < 30) {
    console.log("Just made it!");
}

The else statement

Use the else statement to execute code if all the preceding conditions fail.
else {
    // Code here executed when all conditions fail
}

The following code will output No condition met! (not Congrats!, not Just made it!)
var num = 31;

if (num < 18) {
    console.log("Congrats!");
}
else if (num < 30) {
    console.log("Just made it!");
}
else {
    console.log("No condition met!");
}

Things to note

Note these things about if, else if and else statements.
  1. The if statement has to be the first statement always. You can't write an else if or else statement without an if statement.
    var num = 31;
    
    // The following is completely wrong
    else if (num < 30) {
        console.log("Just made it!");
    }
    if (num < 18) {
        console.log("Congrats!");
    }

  2. You can have as many number of else if statements (after an if) as you like.
    var num = 31;
    
    if (num < 18) {
        console.log("Congrats!");
    }
    else if (num < 20) {
        console.log("Just made it!");
    } 
    else if (num < 25) { // do something }
    else if (num < 28) { // do something }
    else if (num < 30) { // do something }
    else {
        console.log("No condition met!");
    }

  3. else if statments must contain a condition. Writing them without a condition would throw an error.
    var num = 15;
    
    if (num < 18) {
        console.log("Congrats!");
    }
    // This would thrown an error since it is missing a condition
    else if {
        console.log("Just made it!");
    }

  4. The else statement can only come once for each if. Having more than one else per if would throw an error.
    var num = 20;
    
    if (num < 18) {
        console.log("Congrats!");
    }
    else {
        console.log("Just made it!");
    }
    else { // This would thrown an error since it is missing a preceding if condition
        console.log("Wrong thing!");
    }

  5. All these three statements can be nested into each other like this. Nested means statements inside statements.

    Now guess what will this block of code return..
    var num = 15;
    
    if (num < 18) { // if this condition is met 
                    // only then are these statements executed
        if (num == 15) { console.log("The number is 15!"); }
        else if (num == 16) { console.log("The number is 16"); }
        else { console.log("I don't exactly know the number"); }
    }
    else {
        console.log("The number is not below 18");
    }
    Here if, else if and else are nested (put) inside if. The same could've also been done with else if or else.

  6. Logical operators can be used to combine multiple conditions in one statement. See how logical operators work to understand what to use when.
    // The acceptable range for var num is between 10 and 18 (inclusive)
    var num = 15;
    
    if (num >= 10 && num <= 18) { // && means and
        console.log("Within range!")
    }
    else {
        console.log("The number is not below 18");
    }
    Now the number's range could've also been checked using nested if's but that would've taken more lines of code without any reason.
    There are times when nested if's are a better option than logical operators like for example, if we have to test for more conditions after one is met and maybe even more when one of them is met and so on.

In conclusion

The if, else if and else statements are extremely useful and easy to use when it comes to conditional programming because of there resemblance to the English language.

Now take your time to go through this page one more time if you think you have not grasped all of the flavor. Again practice and even consider taking this short quiz on if, else and else if to solidify your understanding of this chapter.

When you feel you are all set with these three only, proceed to the next avenue of conditional programming - Switch.