Understanding ternary operator in JavaScript

SrijanJun 08, 2025 - JavaScript

What you should know?

• Know what variables are in JavaScript.
• Understand boolean expressions (conditions that return true or false).
• Be familiar with if/else statements and what they do.

What you will learn

• What the ternary operator is in JavaScript.
• How to use it in place of if/else statements.
• How nested ternary operators work.
• When and how to use ternary operators properly.
• Why using it carelessly can reduce readability?

Key concepts

The ternary operator is a way to write an if/else statement in a single line.

Syntax:

1condition ? value_if_true : value_if_false;

The name "ternary" comes from the fact that it operates on three things (operands):

• A condition to check (evaluates to true or false).
• A value to return if the condition is true.
• A value to return if the condition is false.

Example:

1let score = 75;
2let grade = score >= 60 ? "Pass" : "Fail";
3
4console.log(grade); // Output: "Pass"

Ternary operator in place of if/else

Ternary operators are shortcuts for simple if/else cases.

1// Using if/else
2let age = 20;
3let message;
4if (age >= 18) {
5  message = "You can vote";
6} else {
7  message = "You cannot vote";
8}
9console.log(message); // Output: You can vote

Now, let's achieve the same result using the ternary operator:

1let age = 20;
2let message = age >= 18 ? "You can vote" : "You can't vote";
3
4console.log(message); // Output: "You can vote"

Nested Ternary Operators

A nested ternary is when you put a ternary inside another ternary.

Nesting can make code shorter but more complicated to read and understand.

Let's consider an if/else if/else scenario:

1// Using if/else if/else
2let score = 75;
3let grade;
4
5if (score >= 90) {
6  grade = "A";
7} else if (score >= 80) {
8  grade = "B";
9} else {
10  grade = "C"; // Assuming C for anything below 80 for simplicity
11}
12console.log(grade); // Output: C

Now, let's write the above code using nested ternary operator:

1// Using nested ternary operator
2let score = 75;
3let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
4
5console.log(grade); // Output: C

How to read this:

• If score >= 90? If yes, the grade is "A".
• If not, is score >= 80? If yes, the grade is "B".
• Else, the grade is "C".

Proper Use of ternary operators

As the grade example shows, even slightly nested ternary operators can become difficult to follow. Deeply nested ternaries are almost always a bad idea.

If a ternary operator makes you pause and figure out what it does, using a standard if/else statement is better. Always prioritize clarity while writing code.

Use ternary when:

• You have a simple true/false condition.
• You want to assign a value based on a condition.

Why it matters

• The ternary operator helps you write cleaner, shorter code.
• It is an expression (produces a value) rather than a statement (performs an action) is key. Therefore, it fits naturally into assignments (variable = condition ? ...) or even function arguments.
• However, using it too much or for complex logic can make your code hard to read, understand, and debug. Writing readable code is more important than writing shorter code.