What is a Conditional Statement?

Conditional statements come in use when one wants to perform different actions based on different input/criteria. The simplest example is a true or false question. Let's look at an example of an if statement.

if

   // Is the sun out today?
    let sun = true;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    }

    // Output will be: Yes the sun is shining ☀️

    // Syntax of if statement
    /*
    if(condition) {
        code that will be executed if condition is true
    }
    */

So above we are asking if the sun is out (testing the condition) and because it is true, the code between the curly braces (see example of syntax in comments above) is being executed. So what happens if the sun isn't out?

else

 // Is the sun out today?
    let sun = false;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    } else {
        return 'No, sorry!'
    }

    // Output will be: No, sorry!

    // Syntax of else statement
    /*
    if(condition) {
        code that will be executed if condition is true
    } else {
        execute this code if the first condition is false
    }
    */

Our else statement allows for a fallback. The else keyword just adds to the if statement by offering a backup if the condition isn't met.

else/if

You can probably guess what the else/if statement does 🤔.

  // Is the sun out today?
    let sun = false;
    let rain = false;

    if(sun) {
        return 'Yes the sun is shining ☀️';
    } elseif (rain) {
        return 'No, sorry it is raining today 🌧️';
    } else {
        return 'It is mild'
    }

    // Output will be: It is mild

    // Syntax of esle/if statement
    /*
    if(condition1) {
        code that will be executed if condition 1 is true
    } elseif (condition 2) {
        execute this code if the condition 1 is false and condition 2 is true
    } else {
        execute this code if all of the above are false
    }
    */

As we can see, the else/if continues giving us extra options to choose from. The statements are processed from top to bottom, so there must always an else when using else/if. The else isn't necessary for an if statement.

Switch

var day = 'thursday';

switch (day) {
    case 'sunday' :
        day = "Sunday";
        break;
    case 'monday':
        day = "Monday";
        break;
    case 'tuesday':
        day = "Tuesday";
        break;
    case 'wednesday':
        day = "Wednesday";
        break;
    case 'thursday' :
       day = "Thursday";
        break;
    case friday:
        day = "Friday";
        break;
    case  'saturday':
        day = "Saturday";

}

// Syntax of switch statement
    /*
    switch(expression) {
    case x:
        code block
        break;
    case y:
        code block
        break;
    case z:
        code block
        break;
    default:
        code block
}
    */

The switch statement executes the code, and returns the matched value. The break keyword stops executing the code once the match has been found as further execution is not required. In the example, a default wasn't used but it can be added if required.

Differences between else/if and switch

There are a few smaller differences between the two, which can be discussed at a later stage.

Further Learning

To practice, create a conditional statement for the following scenario. There are 4 greetings for the day depending on the time.

• Between 00.00 and 12.00 the greeting will be 'Good Morning'
• Between 12.01 and 17.00 the greeting will be 'Good Day'
• Between 17.00 and 20.00 the greeting will be 'Good Evening'
• Between 20.01 and 23.59 the greeting will be 'Good Evening'

You can use console.log() for outputting your results or try CodePen to play around with better syntax highlighting.

If you need get stuck drop me a tweet 😃. Good Luck and happy coding!

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.