JavaScript Ternary Operator

The Ternary Operator in JavaScript is a conditional operator that evaluates a condition and returns one of two values based on whether the condition is true or false. It simplifies decision-making in code, making it more concise and readable.

Syntax

condition ? trueExpression : falseExpression

• Condition: A condition that evaluates to true or false.
• expressionIfTrue: The value or expression is returned if the condition is true.
• expressionIfFalse: The value or expression returned if the condition is false.

Now let's understand this with the help of example:

// JavaScript to illustrate Conditional operator
let PMarks = 50;
let res = (PMarks > 39) ? "Pass" : "Fail";

console.log(res);

Output

Pass

In this example

• The value of PMarks is 50.
• The condition (PMarks > 39) evaluates to true because 50 is greater than 39.
• Since the condition is true, the ternary operator returns "Pass", which is assigned to the variable res.
• Finally, console.log(res) prints "Pass" to the console.

Nested Ternary Operators

The ternary operator can be nested, allowing you to perform multiple conditional checks in a single line of code. This technique is useful for replacing more complex if...else if...else statements or switch statements, keeping the code compact and readable.

let day = 3;
let greeting = (day === 1) ? 'Start of the week' :
               (day === 2) ? 'Second day' :
               (day === 3) ? 'Midweek' :
               (day === 4) ? 'Almost weekend' :
               'Weekend';

console.log(greeting); 

Output

Midweek

In this Example

• If day is 1, it returns "Start of the week".
• If day is 2, it returns "Second day", and so on.
• If none of the conditions are met, it returns "Weekend".

Ternary Operator in Functions

The ternary operator can also be used inside functions to simplify conditional logic. It helps make functions more concise by replacing if...else statements with a single-line expression.

function checkAge(age) {
  return (age >= 18) ? 'Adult' : 'Minor';
}

console.log(checkAge(20));  
console.log(checkAge(15)); 

Output

Adult
Minor

In this example

• The checkAge function checks if age is greater than or equal to 18.
• If true, it returns 'Adult'; otherwise, it returns 'Minor'.
• checkAge(20) returns 'Adult', printed to the console.
• checkAge(15) returns 'Minor', printed to the console.

Using the Ternary Operator with Function Calls

You can use the ternary operator to decide which function to call or what arguments to pass when calling a function. This makes your code shorter and easier to read by replacing long if...else statements.

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

function sayGoodbye(name) {
  console.log(`Goodbye, ${name}!`);
}

let isLeaving = true;
let name = 'Geeks';

isLeaving ? sayGoodbye(name) : sayHello(name);  

Output

Goodbye, Geeks!

In this example

• The function sayHello(name) prints "Hello, {name}!".
• The function sayGoodbye(name) prints "Goodbye, {name}!".
• isLeaving is set to true.
• The ternary operator checks isLeaving: Since isLeaving is true, it calls sayGoodbye(name).

A Comparison of the Ternary Operator and the if...else Statement

Understanding the difference between the ternary operator and the traditional if...else statements is key in determining which to use for concise and readable code.

Using if...else Statement

The if...else statement is a basic control structure that allows you to perform different actions based on a condition. It is typically used when you need to execute more complex or multiple statements depending on a condition.

let hour = 15;
let message;

if (hour < 12) {
  message = 'Good morning';
} else {
  message = 'Good afternoon';
}

console.log(message); 

Output

Good afternoon

In this example

• The if...else block checks if the hour is less than 12.
• If the condition is true, it assigns 'Good morning' to message.
• Otherwise, it assigns 'Good afternoon' to message.

Using the Ternary Operator

The ternary operator is a shorthand way of writing an if...else statement. It is most useful when you want to assign values based on a simple condition, making the code more compact.

let hour = 15;
let message = (hour < 12) ? 'Good morning' : 'Good afternoon';

console.log(message); 

Output

Good afternoon

In this example

• The ternary operator checks if the hour is less than 12.
• If the condition is true, it assigns 'Good morning' to message.
• Otherwise, it assigns 'Good afternoon' to message.