What is Conditional or Ternary Operator in TypeScript?

What is Conditional or Ternary Operator?

The TypeScript conditional operator, also known as the ternary operator because it takes three operands.

It evaluates a condition and returns one of two expressions based on whether the condition is true or false.

It is the other way around to write the an if-else statement. This operator is utilized to depict a conditional expression.

Here’s the syntax:

condition ? expression1 : expression2;

Condition – is a boolean expression that is evaluated as true or false.
value_if_true – is the result if the condition is true.

value_if_false – is the result if the condition is false.

This operator initially evaluates the condition. If the condition is true, it returns value_if_true.

If the condition is false, it returns value_if_false.

Conditional Operator Example

Example 1:

let grade = 70;
let type = grade >= 75 ? 'Pass' : 'Fail';
console.log(type);

Output:

Fail

Example 2:

let grade = 90;
let type = grade >= 75 ? 'Pass' : 'Fail';
console.log(type);

Output:

Pass

In addition, this operator works with three values and is a shorthand way of writing an if-else statement.

value1 ? value2 : value3

or

if (value1 === True) value2
else value3

Moreover, this operator is useful for shortening if-else statements into one line of code.

It can be used in various scenarios where you need to choose between two values based on a condition.

Example 3:

let age: number = 18;
let CanStartWorking: string = (age >= 18) ? "Yes, you can start working." : "No, you cannot start working.";
console.log(CanStartWorking);

In our example code, the condition age >= 18 is evaluated.
If the condition is true, the expression “Yes, you can start working.” is executed.
If the condition is false, the expression “No, you cannot start working.” is executed.

Output:

Yes, you can start working.

Multiple Conditions Example

You can use the conditional (ternary) operator with multiple conditions by nesting them.

Here’s an example in TypeScript:

let score: number = 90;
let grade: string = (score >= 100) ? "A" :
                    (score >= 90) ? "B" :
                    (score >= 80) ? "C" :
                    (score >= 75) ? "D" : "F";
console.log(`Your grade is: ${grade}`);

As you can see in our given example:

The first condition score >= 100 is checked. If true, the grade is “A”.
If the first condition is false, the next condition score >= 90 is checked. If true, the grade is “B”.
This pattern continues for the rest of the conditions.

Conclusion

So, that’s the end of our discussion on the conditional or ternary operator, which is a shorthand way of writing an if-else statement that returns a value based on a condition.

It offers a concise and readable way to handle simple conditional logic.

While it can simplify code, it’s essential to use it judiciously to maintain readability and avoid potential pitfalls.

By understanding its syntax, structure, and best practices, you can leverage the ternary operator to write cleaner and more efficient TypeScript code.