What are CONDITIONAL statements in JavaScript?

A conditional statement is an essential part of any programming language. It is used to execute one or more statements based on a particular condition. Each condition works on a Boolean value that can be true or false.

conditionals in JavaScript :

1. if Statement

Let us start this guide off with the most basic conditional statement that you should learn, the if statement.

The JavaScript if statement allows you to run a code block when the condition you specify is true.

if (condition) {
    //Code be run when the condition is truthy
}

Example of Writing an if Statement in JavaScript:

Let us write a short script to show you how the if statement works within JavaScript. In this script, we will get the current day of the week and use a conditional statement to see if it is Wednesday.

Start the script by instantiating the Date() object and assigning it to a constant named “date“.

We then access the date objects “getDay()” function to get the day of the week and store it in a variable called “day“.

Finally, we use our JavasScript’s if statement to check whether the day variable is identical (===) to 3 (Wednesday).

If the day is identical to 3, then the text “The Day is Wednesday” will be printed to the console.

const date = new Date();

const day = date.getDay();

if (day === 3) {
    console.log("The Day is Wednesday");
}

2. if-else Statements

The next conditional statement we will explore is the JavaScript “if...else” statement.

An if-else statement executes one block if its condition is truthy and the other block if it is falsy.

A truthy value is a value that JavaScript considers true when it encounters it in a boolean context. A falsy value is a value that JavaScript considers false when it encounters it in a boolean context.

Here’s the syntax for an if-else statement:

if (condition) {
    // If the condition is a truthy value, this code block will run
} else {
    // If the condition is a falsy value, this code block will run
}

Example of Using The if-else Conditional Statement:

Let us build upon the example we used in the “if statement” section.

By adding an else statement to the end of an if statement we can print a message stating that it is not Wednesday.

With the example below, we first use an if statement to check if the day of the week is identical to “3“. If it isn’t identical, the code will fall through to our else statement and print the text “The Day is not Wednesday“.

const date = new Date();

const day = date.getDay();

if (day === 3) {
    console.log("The Day is Wednesday");
} else {
    console.log("The Day is not Wednesday");
}

2. An else-if statement

An else-if executes the block that matches one of several conditions, or a default block if no conditions match.The else-if statement allows JavaScript to execute a block of code based on several conditions.

if (condition) {
    // If the condition is truthy, this code block will run, and code execution will stop.
} else if (condition_2) {
    // If the first condition is falsy, this code block will run if condition_2 will truthy. 
} else if (condition_n) {
    // If the previous conditions are both falsy, this code block will run if condition_n is truthy
} else {
    // If all conditions are falsy, this code block will run
}

Using else-if statements, you can evaluate as many conditions as you want. However, this method quickly becomes unsightly and hard to maintain as the number of conditions increases.

JavaScript provides a cleaner way to evaluate multiple conditions called the switch statement.

3. The Switch Statement

The switch statement evaluates an expression once and tries to match it against one or more possible values. You can provide each potentially matching value after a case keyword. When the switch statement finds a match, it runs all the statements after it, until it encounters a break statement.

Here’s the syntax for the switch statement:

switch (expression) {
    case 'first-case':
        // executes code if the expression matches this case
        break;

    case 'case_2':
        // executes code if the expression matches this case
        break;

    default:
        // executes code if the expression doesn't match any case
}

The break statements are an essential part of the switch block because they specify where the code should stop executing. If you miss out a break statement, the code execution will continue and execute all the other code blocks after the first match. This is rarely what you’ll want to happen.