if-else & Ternary Operator in JavaScript

Very often in JavaScript you want to conditionally execute a block of code. If condition evaluates true, you execute “if” block of code or if condition is false, you execute “else” block of code.

We use if-else in the JavaScript to implement this. if-else helps you to control the program flow in JavaScript.

Let’s see the real life example.

Bulb (💡) has two states, on & off. Let’s see how to put this into if-else condition.

‎
function TurnBulbOnOff(state) {

    if (state === "on") {
        console.log("Bulb is on");
    }
    else {
        console.log("Bulb is off");
    }
}

TurnBulbOnOff("on");
TurnBulbOnOff("off");
‎

In the function TurnBulbOnOff we have written if-else statement. We are passing state of bulb to the function as a parameter. Inside function, we are checking if state is equals to “on” or not.

If it is “on” then “if” block will get executed with the message in console “Bulb is on” otherwise “else” block will get executed with the message “Blub is off“.

We are calling the function with both “on” & “off” values. So it will print both meaasge for respected values passed.

if with else-if

Sometimes, there can be multiple conditions need to be evaluated. You can use else-if to implement this.

Let’s see the real life example.

‎‎‎
function FootballMatchResult(result) { 

    if (result === "Lost") {
        console.log("Football Match is Lost");
    }
    else if (result === "Won") {
        console.log("Football Match is Won");
    }
    else {
        console.log("Football Match is Draw");
    }
}
FootballMatchResult("Lost");
FootballMatchResult("Won");
FootballMatchResult("Draw");
‎

We have defined FootballMatchResult function which is accepting result parameter. Inside function, we have written if statement which also includes else-if condition. Because Football match has more than two result types, to put all of them into condition we have to use else-if.

We are calling this function with three possible result of the match. You will get all three messages in the console window.

Note: You can write as many else-if blocks as per your conditions.

Note: You can even end block with else-if. But, make sure you write else block at the end, because it will act as a default block in else-if chain.

Ternary Operator

Using ternary operator is a new way of writing if-else condition. It is very useful when you can define if-else in single line. By using ternary operator, code will be very concise and readable. It is made up of three operands. We’ll talk about this later.

Let’s see above examples with Ternary operator.

Bulb Example with Ternary Operator

‎
function TurnBulbOnOff(state) {

   state === "on" ? console.log("Bulb is on") : console.log("Bulb is off");
}

TurnBulbOnOff("on");
TurnBulbOnOff("off");
‎

In the above example, we have used ternary operator instead of if-else. Ternary operator made by three operands.

Syntax of ternary operator.

• Condition followed by (?) question mark.
• Truthy expression followed by colon (:)
• and Falsy expression

Read 📖 : About Truthy & Falsy.

condition ? True : False

If condition is true, then line after question mark (?) will get executed & if condition is false then line after colon (:) will get executed.

You will get same messages in console as you get for if-else example of TurnBulbOnOff function very above.

Football Match Example with Ternary Operator

‎
function FootballMatchResult(result) { 

    result === "Lost" ? console.log("Football Match is Lost") :
    result === "Won" ? console.log("Football Match is Won") :
    console.log("Football Match is Draw");
}
FootballMatchResult("Lost");
FootballMatchResult("Won");
FootballMatchResult("Draw");
‎

Like else-if, you can also use multiline ternary operators if you have multiple conditions. You can see how much code lines we have reduces. Also, it is more concise and readable now.

You will get same messages in the console as you get for if/else-if example of FootballMatchResult function very above.

That’s it. This is the way we write if-else in the JavaScript.