JavaScript Fundamentals 1 | Switch Statement

The switch statement is an alternative way of writing a complicated if/else statement when all we want to do is to compare one value to multiple different options. Let's consider we have a weekday variable and, for each day, we have a different activity. For this, we can use multiple if/else statements but let's use the switch statement :

script.js

const weekday = 'Monday'

/**
 * weekday in the switch parenthesis is the value or expression to evaluate
*/
switch(weekday) {
    /**
     * weekday will be compared to the case 'Monday' in a strict equality way .i.e.
     * weekday === 'Monday'. Same goes for the remaining cases
    */
    case 'Monday':
        /**
         * Statement or code executed when the value of
         * weekday matches 'Monday'. Same goes for the remaining cases
        */
        console.log('Learning JavaScript');        console.log('Playing Call of Duty');
        break;
    case 'Tuesday':
        console.log('Learning ReactJS');
        break;
    case 'Wednesday':
        console.log('Learning NextJS');
        break;

    case 'Thursday':
    case 'Friday':
        console.log('Learning GatsbyJS');
        break;
    case 'Saturday':
        console.log('Playing FIFA');
        break;
    case 'Sunday':
        console.log('Spend time with family');
        break;
    default:
        /**
         * Default is the code executed if all the other cases fail. Code
         * executed for invalid week days. Just like an else block at the
         * end of a long if/else statement.
        */
        console.log('Not a valid day!')
}

If you execute the above code, you will notice that the highlighted lines are being logged. This is because weekday, which is our expression, has been evaluated to 'Monday' and matched the case case 'Monday'. Thus executing the associated statements. When break is encountered, the program breaks out of switch and executes the code that follows.

You can associate a single operation to more than one case like we did with the cases 'Thursday' and 'Friday'. That is if weekday matches 'Thursday' or 'Friday' the result logged to the console will be 'Learning GatsbyJS'. It takes advantage of the fact that if there is no break below a case clause, it will continue to execute the next case clause regardless if the case meets the criteria.

Without the break, the code will run from the case where the criterion is met and will run the cases after that until the next break. For example, let's suppose we have this :

script.js

const weekday = 'Monday'
switch(weekday) {
    case 'Monday':
        console.log('Learning JavaScript');        console.log('Playing Call of Duty');    case 'Tuesday':
        console.log('Learning ReactJS');    case 'Wednesday':
        console.log('Learning NextJS');    case 'Thursday':
    case 'Friday':
        console.log('Learning GatsbyJS');    case 'Saturday':
        console.log('Playing FIFA');        break;
    case 'Sunday':
        console.log('Spend time with family');
        break;
    default:
        console.log('Not a valid day!')
}

If we run the above code, the provided output will be the highlighted lines. This is because, as I said above, it will run from the case where the criterion is met; in this case, weekday matches case 'Monday'. The corresponding code will be executed, that is, console.log('Learning JavaScript') and console.log('Playing Call of Duty'). Since we didn't tell it to stop with a break, it will then run all the remaining cases until it meets the next break, which is the one in case 'Saturday', and there it stops executing.

const - JS | lectureJavaScript Fundamentals 1