JavaScript Ternary Operator

Introduction

In JavaScript, writing clean and concise code is an important skill. Developers often need to make decisions based on conditions, and while if…else statements are commonly used, they can sometimes make code longer and harder to read.

This is where the ternary operator comes in. The ternary operator is a shorthand way of writing simple conditional statements in a single line. It helps reduce code length and improves readability when used correctly.

In this guide, you’ll learn everything about the JavaScript ternary operator, including syntax, examples, real-life use cases, common mistakes, and interview questions.

What is the Ternary Operator?

The ternary operator is a conditional operator that takes three operands:

1. A condition
2. A value if the condition is true
3. A value if the condition is false

It is called “ternary” because it works with three parts.

Why Use the Ternary Operator?

The ternary operator is useful because:

1. It reduces code length
2. Improves readability for simple conditions
3. Makes code more concise
4. Replaces simple if…else statements
5. Useful in expressions and assignments

Syntax of Ternary Operator

condition ? expressionIfTrue : expressionIfFalse;

Basic Example

let age = 18;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

Equivalent if…else

The ternary operator simplifies this logic.

let age = 18;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

How the Ternary Operator Works?

There are 3 steps of the Ternary Operator works

1. The condition is evaluated
2. If it is true, the first expression executes
3. If it is false, the second expression executes

Real-Life Examples

You will see the Ternary operator in a real-life example.

1. Age Verification

let age = 20;
let message = (age >= 18) ? "Eligible to vote" : "Not eligible";

2. Login Status

let isLoggedIn = true;
let status = isLoggedIn ? "Welcome back!" : "Please login";

3. Even or Odd

let number = 7;
let result = (number % 2 === 0) ? "Even" : "Odd";

4. Default Value

let username = "";
let name = username ? username : "Guest";

Nested Ternary Operator

You can use ternary operators inside another ternary operator.

Example:

let marks = 85;
let grade = (marks >= 90) ? "A" :
            (marks >= 75) ? "B" :
            (marks >= 50) ? "C" : "Fail";

console.log(grade);

Note: nested ternary operators can reduce readability.

Ternary Operator with Functions

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

Ternary Operator in JSX

 Widely used in modern frameworks like React.

{isLoggedIn ?  : }

Ternary vs if…else

Multiple Conditions with Logical Operators

let age = 20;
let hasID = true;

let result = (age >= 18 && hasID) ? "Allowed" : "Not allowed";

Common Mistakes

You will see some common mistakes.

1. Overusing Nested Ternary

 Hard to read—avoid deep nesting.

let result = condition1 ? value1 : condition2 ? value2 : value3;

2. Forgetting Parentheses

let result = age >= 18 ? "Adult" : "Minor";

Note: Parentheses improve readability.

3. Mixing with Assignment Incorrectly

let x;
condition ? x = 10 : x = 20; // confusing

✔ Better:

let x = condition ? 10 : 20;

Advanced Examples

1. Conditional Rendering

let isAdmin = true;
let message = isAdmin ? "Admin Panel" : "User Dashboard";

2. Handling Null Values

let value = null;
let result = value ?? "Default";

3. Combining with Functions

let getStatus = (score) => score > 50 ? "Pass" : "Fail";

Interview Questions on JS Ternary Operator

Conclusion

The JavaScript ternary operator is a powerful and concise way to write conditional logic. It helps reduce code length and improves readability when used appropriately.

However, like any tool, it should be used wisely. For simple conditions, it’s perfect—but for complex logic, sticking with if…else is a better choice.

Related JavaScript Tutorials