TypeScript Ternary Operator

Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.

A ternary operator can be used to replace an if..else statement in certain situations. Before you learn about ternary operators, be sure to check the TypeScript if...else tutorial.

What is a Ternary Operator?

The ternary operator ?: is a conditional operator that evaluates either of two expressions — true or false — based on a conditional expression.

let age: number = 36;

// Check if the person is an adult
let result: string = (age >= 18) ? "Adult" : "Not Adult";

console.log(result);

// Output: Adult

Syntax of TypeScript Ternary Operator

The syntax of the ternary operator in TypeScript is:

condition ? expression1 : expression2

The ternary operator evaluates the test condition. If condition is

• true - expression1 is executed.
• false - expression2 is executed.

The ternary operator takes three operands, hence, the name ternary operator. It is also known as a conditional operator.

Example: TypeScript Ternary Operator

Let's write a program to determine if a student passed or failed in the exam based on marks obtained.

// Program to check pass or fail

// prompt() returns either string or null
let userInput: string | null = prompt("Enter your marks: ");

// Type Narrowing: check if the input is valid
// String is valid input, null is invalid
if (typeof userInput === "string") {
    
    // Convert input to number
    let marks = Number(userInput);
    
    // Check the condition
    let result: string = (marks >= 40) ? "passed" : "failed";

    console.log(`You ${result} the exam.`);
}
else {
    console.log("Invalid input!");
}

Output 1

Enter your marks: 78
You passed the exam.

Suppose the user enters 78. Then the condition marks >= 40 is true.

So, the first expression "passed" is assigned to the result variable.

Output 2

Enter your marks: 35
You failed the exam.

Suppose the user enters 35. Then the condition marks >= 40 evaluates to false.

So, the second expression "failed" is assigned to the result variable.

Ternary Operator vs. if...else

In TypeScript, both the ternary operator and the if...else statement serve similar purposes: to execute code conditionally based on certain conditions.

However, they differ in syntax and use cases.

The ternary operator is ideal for concise conditional assignments or inline expressions.

On the other hand, the if...else statement allows for multiple conditions and code blocks, making it more suitable for elaborate decision-making scenarios.

A ternary operator can be used to replace certain types of if..else statements.

For example, you can replace this code:

// Check the age to determine the eligibility to vote
let age: number = 15;
let result: string;

if (age >= 18) {
    result = "You are eligible to vote.";
}
else {
    result = "You are not eligible to vote yet.";
}

console.log(result);

with

// Ternary operator to check the eligibility to vote
let age: number = 15;

let result: string = (age >= 18)
    ? "You are eligible to vote."
    : "You are not eligible to vote yet";

console.log(result);

The output of both programs will be the same.

Output

You are not eligible to vote yet.

Nested Ternary Operators

You can also nest one ternary operator as an expression inside another ternary operator. For example,

// Program to check if the number is positive, negative, or zero
let a: number = 3;
let result: string = (a >= 0) ? (a == 0 ? "zero" : "positive") : "negative";
console.log(`The number is ${result}.`);

Output

The number is positive.

Note: Nested ternary operators can be hard to read. Use them only when the logic is simple and well-contained.

Also Read:

• TypeScript if...else Statement
• TypeScript Booleans