What is Conditional Statement?

Conditional statements are backbone of any programming language. It gives us the ability to execute different code blocks based on particular condition. The most basic conditional statement is the if statement. In this article, we will learn about different types of conditional statements in JavaScript.

In JavaScript, a conditional statement is used to execute a block of code if a certain condition is true. JavaScript has various conditional statements that can be used to perform different operations based on different conditions.

1. if statement
2. switch statement

if statement

The if statement is used to execute a block of code if a certain condition is true. The syntax of the if statement is as follows:

if (condition) {
    // code block to be executed if the condition is true
}

There are multiple if tools that could be use in multiple scenarios:

1. if
2. if, else
3. if, else if, else if, ... , else
4. if, nested if ... else, else

If

Here is an example of how you can use an if statement in JavaScript:

const x = 10;

if (x > 5) {
    console.log("x is greater than 5");
}

In this example, the if statement checks if the value of x is greater than 5. If it is, the code inside the curly braces is executed, and the message x is greater than 5 is printed to the console. If the condition is not true, the code inside the curly braces is skipped.

If...else

The if statement can be followed by an optional else statement, which executes a block of code if the condition is false. The syntax of the if...else statement is as follows:

const x = 3;

if (x > 5) {
    console.log("x is greater than 5");
} else {
    console.log("x is not greater than 5");
}

In this example, the code inside the else block is executed, because the condition x > 5 is not true.

If...else if...else

You can also use an if, else if, else statement to test multiple conditions:

const x = 3;

if (x > 5) {
    console.log("x is greater than 5");
} else if (x < 5) {
    console.log("x is less than 5");
} else {
    console.log("x is equal to 5");
}

In this example, the code inside the else if block is executed, because the condition x < 5 is true.

Nested if...else

You can also nest an if statement inside another if statement. The code inside the inner if statement is executed only if the condition of the outer if statement is true:

const x = 3;

if (x > 5) {
    if (x < 10) {
        console.log("x is greater than 5 and less than 10");
    }
}

In this example, the code inside the inner if statement is executed, because the condition of the outer if statement is true.

Note: The code inside the inner if statement is executed only if the condition of the outer if statement is true. If the condition of the outer if statement is false, the code inside the inner if statement is not executed.

switch statement

It executes a block of code based on the value of a specific expression, often used as an alternative to the if-else statement, especially when you have multiple conditions to test.

Here is an example of how to use a switch statement in JavaScript:

const x = "apple";

switch (x) {
    case "apple":
        console.log("x is an apple");
        break;
    case "banana":
        console.log("x is a banana");
        break;
    default:
        console.log("x is neither an apple nor a banana");
}

In this example, the switch statement compares the value of x to the values specified in the case clauses. If x is equal to 'apple', the code inside the first case block is executed, and the message 'x is an apple' is printed to the console. If x is equal to 'banana', the code inside the second case block is executed, and the message 'x is a banana' is printed to the console. If x is neither 'apple' nor 'banana', the code inside the default block is executed, and the message 'x is neither an apple nor a banana' is printed to the console.

The break statement is used to exit the switch statement and prevent the code in the following case blocks from being executed.

If you omit the break statement, the code in the following case blocks will be executed.

const x = "apple";

switch (x) {
    case "apple":
        console.log("x is an apple");
    case "banana":
        console.log("x is a banana");
    default:
        console.log("x is neither an apple nor a banana");
}

In this example, the code inside the default block is executed, because the break statement is omitted. The message x is a banana is printed to the console, even though the value of x is 'apple'.

default is an optional block that is executed if none of the case clauses match the value of the expression.

switch statement vs if-else statement

switch statement can only be used to check for equality. You can't use it to check for inequalities, greater than, less than, etc.

If you need to check for inequalities, greater than, less than, etc., you should use an if-else statement instead.

Ternary Operator

The ternary operator is a shorthand way to write an if-else statement. The syntax of the ternary operator is as follows:

condition ? exprIfTrue : exprIfFalse;

Here is an example of how to use the ternary operator in JavaScript:

const x = 10;

const result = x > 5 ? "x is greater than 5" : "x is not greater than 5";

console.log(result);

In this example, the ternary operator is used to assign the value of the result variable based on the value of x. If x is greater than 5, the value of the result variable is 'x is greater than 5'. If x is not greater than 5, the value of the result variable is 'x is not greater than 5'.

The ternary operator is often used as a shortcut for the if-else statement. However, it is not always the best choice, and you should consider using an if-else statement if you need more flexibility or control.:::

Conclusion

In this article, we have learned about the if statement, switch statement, and ternary operator in JavaScript. We have also learned how to use them in our code.