JavaScript Conditional (Ternary) Operator

In this chapter, we will learn about the JavaScript conditional (ternary) operator. The ternary operator is a shorthand for the if...else statement and provides a more concise way to perform conditional operations. We will cover:

• Introduction to the Conditional (Ternary) Operator
• Syntax of the Ternary Operator
• Using the Ternary Operator
• Nesting Ternary Operators
• Examples of the Ternary Operator

Introduction to the Conditional (Ternary) Operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands. It is often used as a shortcut for the if...else statement to assign values conditionally.

Syntax of the Ternary Operator

The syntax of the ternary operator is:

condition ? expressionIfTrue : expressionIfFalse;

• condition: An expression that evaluates to true or false.
• expressionIfTrue: An expression to be executed if the condition is true.
• expressionIfFalse: An expression to be executed if the condition is false.

Example

let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // Output: Yes

Using the Ternary Operator

The ternary operator can be used to assign values conditionally, return values from functions, or execute statements based on a condition.

Example 1: Assigning Values

let age = 16;
let message = (age >= 18) ? "You are an adult." : "You are not an adult.";
console.log(message); // Output: You are not an adult.

Example 2: Returning Values from Functions

function getFee(isMember) {
  return (isMember ? "$2.00" : "$10.00");
}

console.log(getFee(true));  // Output: $2.00
console.log(getFee(false)); // Output: $10.00

Example 3: Executing Statements

let age = 20;
(age >= 18) ? console.log("You can vote.") : console.log("You cannot vote.");
// Output: You can vote.

Nesting Ternary Operators

You can nest ternary operators to handle multiple conditions. However, it’s important to use them sparingly, as they can make the code harder to read.

Example

let age = 25;
let category = (age < 13) ? "Child" :
               (age < 18) ? "Teenager" :
               (age < 65) ? "Adult" : "Senior";
console.log(category); // Output: Adult

Examples of the Ternary Operator

Example 1: Checking for Even or Odd Number

let number = 7;
let result = (number % 2 === 0) ? "Even" : "Odd";
console.log(result); // Output: Odd

Example 2: Assigning Default Values

let user = null;
let userName = user ? user.name : "Guest";
console.log(userName); // Output: Guest

Example 3: Simplifying Multiple Conditions

let grade = 85;
let performance = (grade >= 90) ? "Excellent" :
                  (grade >= 75) ? "Good" :
                  (grade >= 50) ? "Average" : "Poor";
console.log(performance); // Output: Good

Conclusion

In this chapter, you learned about the JavaScript conditional (ternary) operator. You explored its syntax, how to use it for conditional assignments, returning values, and executing statements. You also learned how to nest ternary operators for handling multiple conditions. The ternary operator is used for writing concise and readable conditional expressions in JavaScript.