Ternary operator in Javascript

What is a Ternary Operator?

Ternary Operator in Javascript is a special operator which has three operands. In JavaScript, there is only one such operator, and that is the Conditional Operator or the Question Mark Operator( ?: )

This operator is used to write a conditional block in a simpler form and also can be written inside an expression or a statement; that’s why this operator is also known as the inline-if operator.

One of the ternary operator’s best uses is simplifying your code. For example, you can use a ternary operator to set the value of a variable depending on the condition. This saves you from having to use a slightly more messy if…else statement.

Syntax of Ternary operator in Javascript

After a short introduction on what is the ternary operator and a basic example of it, let's dive into its syntax.

As mentioned earlier, the ternary operator is slightly different in that it deals with three operands. These operands are the condition, the “true” expression, then the “false” expression.

When writing this operator you start by specifying a conditional statement, followed by a question mark (?).

You then specify an expression to be executed if the condition is true, followed by a colon (:).

Finally, the ternary operator is ended with an expression that will be executed if your condition is false.

//Ternary operator syntax:

condition ? true expression : false expression;

Usage of Ternary operator in javascript

The ternary operator is used to write short and simpler code.

For example:

var age = 13;

var eligibility = (age >= 13) ? "Eligible to apply" : "Too young; Not eligible" // Eligible to apply

console.log(eligibility)

for the above Example, we start by declaring a variable of age and assign it to the value of 13.

Then we declare another variable of eligibility which we use the ternary operation to dictate the variable value using a simple condition. For the condition of the ternary operation we use the greater-than or equal-to (>=) to check if age is greater-than or equal-to (>=) 13.

If age is greater-than or equal-to (>=) 13, eligibility will be assign the result "eligible to apply".

If age is less-than 13, the eligibility variable will be assign the result "Too young, not eligible to apply.

Now if we were to write this same example in JavaScript using a conditional if statement instead of a ternary operator, it would look like what we have shown below.

Even though both lots of code produce the same result, you can see how the ternary operator allows us to write cleaner and more concise code.

var age = 13;
var b = "";

if (age >= 13) {
   eligibility = "Eligible to apply";
} else {
    eligibility = "Too young, Not eligible to apply";
}

console.log(eligibility );

Chaining Ternary Operators

In JavaScript, the ternary operator also allows conditional chains where the right-side condition chains into another ternary operator.

By chaining ternary operators, you effectively write an “if ...else if ... else” conditional chain. But, of course, you have to be careful that chaining the ternary operators doesn’t make your code less readable.

An example of how you could write this is shown below. We have broken each new part of the conditional chain onto a new line to make it easier to read. You can chain as many ternary operators together if you like.

(condition_1) //first if condition
    ? statement_1 //if the first condition is true
    : (condition_2) //this condition will be checked
                // when the first condition is false
    ? statement_2 //if the condition_2 is true
    : statement_3  //if all the conditions are false

Here, we write another ternary statement in the place of "expression_if_false". We can add as many ternary operators as needed.

let's implement chaining in an example:

var x = 35;

var y = (x < 30) ? "Value was less than 30"
      : (x < 40) ? "Value was less than 40" 
      : "Value was greater than 40";

console.log(y) // Value was less than 40

Note:When chaining ternary operators together, you need to be more careful on how you write them to avoid your code readability being ruined.

Below you can see how the chained ternary operator can written using the if...else conditional statement.

var x = 35;
var y = ""


if (x < 30) {
   y = "Value was less than 30";
} else if (x < 40) {
   y = "Value was less than 40";
} else {
   y = "Value was greater than 40";
}

console.log(y);  // Value was less than 40

Conclusion

A Ternary Operator in Javascript is a special operator which accepts three operands. It is also known as the "conditional" or "inline-if" operator. The ternary Operator in Javascript can makes our code clean and simpler and can also be chained like an if-else if....else if-else block.