JavaScript else if Statement : Programming Foundations #09

JavaScript else if and if statements are used when making programming decisions.  By now, you already know about the JS while loop and using conditionals in looping. Similar to the while loop, the if/else if statement also uses a conditional to determine a decision.

javascript else if

There are four conditional statements in JavaScript that you need to know about.

  • The if statement carries out a block of code if the conditional test you specify is true. 
  • The else statement can be used to execute a code block if the conditional test specified is false. 
  • The JavaScript else if statement is used to set a new conditional test/tests if the previous condition is false. 
  • The switch statement is used to select and execute code from a large number of if statements.

For this tutorial, let’s take a closer look at the if, else and else if statements with a few examples.

The if statement 

The JavaScript if statement will execute its code if a given condition is true

Take a look at the example below

var temperature = 100;

if (temperature > 95){
    console.log("It's really hot!");
}
javascript else if statement

A variable named temperature has been declared and a value of 100 has been assigned to it. Then we have begun the if statement and set the conditional test. The code block in the if statement will only be executed if the condition is found to be true. Try it out!

As 100 > 95, the condition is met and the code inside the curly braces is executed. The phrase “It’s really hot!” will appear in the console.log (see previous tutorial to learn more about using console.log)

The else statement

Let’s modify the previous example to see how you can use the else statement. 

var temperature = 77;

if (temperature > 95){
    console.log("It's really hot!");
} else {
    console.log("It's a nice sunny day!");
}
javascript else if

This time, we have assigned the value 77 to temperature. And so when the code runs, the condition will be false as 77 is not larger than 95. Because the conditional is false, the code inside will not be executed and the program jumps to the else statement. The words “It’s a nice sunny day!” will be printed to the console.log.

The JavaScript else if statement

We use the JavaScript else if statement when writing code that involve several possible decisions. You can add many conditional tests to the original statement, each having different code blocks to be executed if the condition is true. 

Take a look at this example.

if (temperature > 95){
    console.log("It's really hot!");
} else if (temperature < 50){
    console.log("It's pretty cold!");
} else {
    console.log("It's a nice day!");
}

The output that gets printed on the console.log will depend on what value you give to the temperature variable. Go ahead and try it for yourself!

Let’s look at another JavaScript else if example. 

if (lemonDrops >= 5){
    console.log("You have many lemon drops!");
} else if (lemonDrops == 4){
    console.log("You have four lemon drops!");
} else if (lemonDrops == 3){
    console.log("Running out of lemon drops!");
} else if (lemonDrops == 2){
    console.log("Only two left!");
} else if (lemonDrops == 1){
    console.log("You have one lemon drop left!");
} else{
    console.log("You have lots of lemon drops!");
}
javascript else if

Do try this one yourself. As with the previous example, the result changes with the value you give to the variable. The program runs through the statements searching for the appropriate result that corresponds with the value given to lemonDrops. If the program finds that the value of the variable does not correspond with any of the else if statements (as in this example), the code inside the else statement will be executed.  

If you liked this JavaScript else if tutorial, we have more JavaScript articles for you! 

While you’re here feel free to check out our other programming tutorials. We have tutorials on PythonJava and other coding tidbits you’ll love!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.