Ternary Operator: Concise Conditionals

The ternary operator (also known as the conditional operator) is JavaScript's only operator that takes three operands. It provides a shorthand way to write simple if-else statements, allowing you to assign a value to a variable based on a condition.

1. Syntax

The syntax of the ternary operator is:

condition ? expressionIfTrue : expressionIfFalse

• condition: An expression that evaluates to a boolean (true or false).
• expressionIfTrue: The value or expression that is returned/executed if the condition is true.
• expressionIfFalse: The value or expression that is returned/executed if the condition is false.

2. How it Works

The JavaScript engine first evaluates the condition.

• If the condition evaluates to true, the expressionIfTrue is evaluated, and its result is returned.
• If the condition evaluates to false, the expressionIfFalse is evaluated, and its result is returned.

It's essentially a compact if-else statement that returns a value.

3. Examples

Let's see the ternary operator in action.

Simple Numeric Condition

Boolean Condition

String and Other Conditions

4. Why Use the Ternary Operator?

• Conciseness: It provides a very compact way to write simple conditional assignments, making your code shorter.
• Readability (for simple cases): For straightforward if-else assignments, the ternary operator can often be more readable than a multi-line if-else block.
• Conditional Assignment: It's ideal when you need to assign one of two values to a variable based on a condition.

5. When to Use / Avoid

Use when:

• You need to assign one of two values to a variable based on a simple condition.
• The expressions for true and false are relatively short and easy to understand on a single line.

Avoid when:

• The logic becomes complex or involves multiple conditions (if-else if-else). Nested ternaries can quickly become unreadable.
• You need to perform multiple actions (side effects) rather than just returning a value. In such cases, a traditional if-else statement is clearer.

Exercise: Ternary Operator Challenges

Use the ternary operator to solve the following challenges. Log the final result for each.