Ternary Conditional Operator in TypeScript – The Complete Guide

If you are new to TypeScript, you might be wondering what a ternary conditional operator is and how it can be used in TypeScript. In this article, we will take a deep dive into the Ternary Conditional Operator in TypeScript, its syntax, and its different types. We will also look into some FAQs related to the Ternary Conditional Operator in TypeScript.

What is a Ternary Conditional Operator?

A Ternary Conditional Operator is a shorthand way of writing if-else statements in a single line. It is also known as a ternary operator or a conditional operator. It is mostly used when we have to assign a value to a variable based on a condition. The syntax of a ternary conditional operator is as follows:

condition ? trueExpression : falseExpression;

If the condition evaluates to true, then trueExpression is executed. If the condition evaluates to false, then falseExpression is executed.

Types of Ternary Conditional Operator

There are two types of Ternary Conditional Operators in TypeScript:

  • Simple Ternary Conditional Operator

  • Nested Ternary Conditional Operator

Simple Ternary Conditional Operator

A Simple Ternary Conditional Operator is the one that contains only one condition and two expressions. It is the most commonly used ternary operator and is used in situations where we have to assign a value to a variable based on a single condition. The syntax of a simple ternary conditional operator is as follows:

condition ? trueExpression : falseExpression;

Let’s take an example:

let age: number = 17;

let message: string = age < 18 ? "You are not eligible to vote" : "You are eligible to vote";

console.log(message);

In the above example, we have declared a variable age and initialized it with the value 17. We have also declared a variable message and assigned it a value based on the condition whether the age is less than 18 or not. The output of the above code will be:

You are not eligible to vote

Nested Ternary Conditional Operator

A Nested Ternary Conditional Operator is the one that contains multiple conditions and expressions. It is used when we have to assign a value to a variable based on multiple conditions. Nested Ternary Conditional Operators are a combination of multiple ternary operators. The syntax of a Nested Ternary Conditional Operator is as follows:

condition1 ? trueExpression1 : condition2 ? trueExpression2 : falseExpression2;

Let’s take an example:

let age: number = 17;

let gender: string = "female";

let message: string = age < 18 ?

                     gender === "male" ? "Boy, you are not eligible to vote" : "Girl, you are not eligible to vote" :

                     gender === "male" ? "Boy, you are eligible to vote" : "Girl, you are eligible to vote";

console.log(message);

In the above example, we have declared a variable age, a variable gender and a variable message. We have assigned a value to the message variable based on the age and gender variables. The output of the above code will be:

Girl, you are not eligible to vote

FAQs

1. Can we use ternary operators inside a function call?

Yes, we can use ternary operators inside a function call. Let’s take an example:

function getMessage(age: number, gender: string): string {

    return age < 18 ?

           gender === "male" ? "Boy, you are not eligible to vote" : "Girl, you are not eligible to vote" :

           gender === "male" ? "Boy, you are eligible to vote" : "Girl, you are eligible to vote";

}

console.log(getMessage(17, "female"));

In the above example, we have created a function named getMessage that takes two parameters age and gender. We have used a nested ternary operator inside the function and returned the message based on the age and gender parameters. The output of the above code will be:

Girl, you are not eligible to vote

2. Is it better to use ternary operators instead of if-else statements?

It depends on the situation. Ternary operators are mostly used in situations where we have to assign a value to a variable based on a single condition. They are more concise and easy to read. However, if we have multiple nested conditions, it is better to use if-else statements as they are more explicit and easier to understand.

3. Can we chain multiple ternary operators together?

Yes, we can chain multiple ternary operators together. However, it is not recommended as it makes the code harder to read and understand. It is better to use if-else statements in situations where we have to chain multiple conditions together.

4. Can we use ternary operators in JavaScript?

Yes, we can use ternary operators in JavaScript. They have the same syntax as TypeScript.

5. Is it mandatory to use parentheses around the condition in a ternary operator?

No, it is not mandatory to use parentheses around the condition in a ternary operator. However, it is a good practice to use them as it makes the code more readable and avoids any confusion in precedence.

Similar Posts