Conditional Statements in Javascript - if, if... else, if... else...if, switch case and ternary

Hello Coders... Again as always welcoming you back. Bringing another article for you all. This time a pretty important one. Let's discuss it below...

The conditional operator in Javascript first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. There are many types of conditional operators.

if

The if(...) statement evaluates a condition in parentheses and, if the result is true, executes a block of code.

The syntax of the if statement is:

if (condition) {
    // the body of if
}

The if statement evaluates the condition inside the parenthesis ().

1. If the condition is evaluated to true, the code inside the body of if is executed.

2. If the condition is evaluated to false, the code inside the body of if is skipped.

Example-

let name = "Subodh";
if (name == "Subodh"){ 
console.log('You are correct')
}
// 'You are correct will' reflect.

if... else

An if statement can have an optional else clause. The syntax of the if...else statement is

if (condition) {
    // block of code if condition is true
} else {
   // block of code if condition is false
}

The if..else statement evaluates the condition inside the parenthesis.

If the condition is evaluated to true,

1. the code inside the body of if is executed

2. the code inside the body of else is skipped from execution

If the condition is evaluated to false,

1. the code inside the body of else is executed

2. the code inside the body of if is skipped from execution

Example-

let age = 17;
if (age > 17){
  console.log("You are allowed to play")
} else {
  console.log("Sorry, you are not allowed")
}

// "Sorry, you are not allowed" will be the answer here.

if... else if

The if...else statement is used to execute a block of code among two alternatives. However, if you need to make a choice between more than two alternatives, if...else if...else can be used.

The syntax of the if...else if...else statement is:

if (condition1) {
    // code block 1
} else if (condition2){
    // code block 2
} else {
    // code block 3
}

• If condition1 evaluates to true, the code block 1 is executed.

• If condition1 evaluates to false, then condition2 is evaluated.

  • If the condition2 is true, the code block 2 is executed.

  • If the condition2 is false, the code block 3 is executed.

Example-

let age = 9;
if (age > 17){
  console.log("You are allowed to play")
} else if (age > 10) {
  console.log("Sorry, you are not allowed")
} else {
   console.log("Please stay at home")
}

// "Please stay at home" will be the answer here.

Switch Case

The JavaScript switch statement is used in decision making.

The switch statement evaluates an expression and executes the corresponding body that matches the expression's result.

The syntax of the switch statement is:

switch(variable/expression) {
    case value1:  
        // body of case 1
        break;

    case value2:  
        // body of case 2
        break;

    case valueN:
        // body of case N
        break;

    default:
        // body of default
}

The switch statement evaluates a variable/expression inside parentheses ().

• If the result of the expression is equal to value1, its body is executed.

• If the result of the expression is equal to value2, its body is executed.

• This process goes on. If there is no matching case, the default body executes.

Example-

// program using switch statement
let a = 2;

switch (a) {

    case 1:
        a = 'one';
        break;
    case 2:
        a = 'two';
        break;
    default:
        a = 'not found';
        break;
}
console.log(`The value is ${a}`);

// The value is two.

In the above program, an expression a = 2 is evaluated with a switch statement.

• The expression's result is evaluated with case 1 which results in false.

• Then the switch statement goes to the second case. Here, the expression's result matches with case 2. So The value is two is displayed.

• The break statement terminates the block and control flow of the program jumps to outside of the switch block.

Ternary Operator/Condition

A ternary operator evaluates a condition and executes a block of code based on the condition.

Its syntax is:

condition ? expression1 : expression2

The ternary operator evaluates the test condition.

• If the condition is true, expression1 is executed.

• If the condition is false, expression2 is executed.

The ternary operator takes three operands, hence, the name ternary operator. It is also known as a conditional operator.

Example-

let marks = 32;
let result = (marks >= 33) ? 'Pass' : 'Fail';
console.log(result);

// Fail will be the result here.

Thanks for reading...