Skip to main content

Ternary/Conditional Operator

The ternary or conditional operator is a shorthand way of writing an if-else statement. It is also the only operator in TypeScript that takes three operands, hence the name 'ternary'. It's a concise way to compare values, and it reduces the lines of code and improves readability.

Syntax​

The syntax of the ternary operator is as follows:

condition ? value_if_true : value_if_false;

Here,

  • condition: This is an expression which returns a boolean value, either true or false.
  • value_if_true: This value is returned if the condition is true.
  • value_if_false: This value is returned if the condition is false.

Examples​

Let's start with a simple example to understand how the ternary operator works.

let isAdult = true;
let message = isAdult ? "You are an adult." : "You are not an adult.";
console.log(message); // Outputs: "You are an adult."

In this example, the condition isAdult is true, so the string "You are an adult." is assigned to the variable message.

Now, let's see what happens when the condition is false.

let isAdult = false;
let message = isAdult ? "You are an adult." : "You are not an adult.";
console.log(message); // Outputs: "You are not an adult."

In this case, since isAdult is false, the string "You are not an adult." is assigned to the variable message.

Nesting Ternary Operators​

You can also nest ternary operators, which means you can have a ternary operator as the value_if_true or value_if_false part of another ternary operator. However, this can make your code more complex and harder to read, so use it sparingly.

Here's an example of a nested ternary operator.

let age = 15;
let type = age > 18 ? "Adult" : age < 13 ? "Child" : "Teenager";
console.log(type); // Outputs: "Teenager"

In this example, if age > 18 is true, "Adult" is assigned to type. If age > 18 is false, it checks the next condition age < 13. If that is true, "Child" is assigned to type. If age < 13 is also false, "Teenager" is assigned to type.

Conclusion​

The ternary operator is a useful tool in TypeScript that allows you to write more concise and readable code. It's an efficient way to handle simple if-else conditions. However, for complex conditions, using traditional if-else statements might be more readable.

Practice​

Try to use the ternary operator in your code and see how it can make your code cleaner and more efficient. Ternary operators are a fundamental part of TypeScript and mastering them will help you become a better programmer.