CODING BYTES: PART 4 — CONDITIONAL STATEMENTS
Tags: beginners, javascript, webdev
Published: 2018-11-30 11:25:26

---
title: CODING BYTES: PART 4 — CONDITIONAL STATEMENTS
published: true
description: Continuing with the Coding Bytes series, we take a look at conditional statements. Conditional statements are the base of most logic helping us move towards the fun stuff.
tags: beginners, javascript, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m0qxi3ouyv9b7fsa7aes.png
---
# 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

```javascript
   // 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

```javascript
 // 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 🤔.

```javascript
  // 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

```javascript
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](https://codepen.io) 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](https://twitter.com/lawyerscode) or on our #devNewbie [Discord](https://discordapp.com/invite/mBsMP2H) server where we have a friendly group of learners sharing their experiences._