To my personal taste, a carefully aligned nested ternary beats the if-else mess:
const H =
C == 0 ? null :
V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 :
(r - g) / C + 4 ;
Top answer 1 of 10
55
To my personal taste, a carefully aligned nested ternary beats the if-else mess:
const H =
C == 0 ? null :
V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 :
(r - g) / C + 4 ;
2 of 10
42
I think you can have this to avoid the deep nesting:
var H
if(C == 0){
H = null;
}
else if(V == r){
H = (g - b) / C;
}
else if (V == g){
H = (b - r) / C + 2;
}
else {
H = (r - g) / C + 4;
}
Reddit
reddit.com › r/react › nested ternary operators. how bad are they?
r/react on Reddit: Nested ternary operators. How bad are they?
January 26, 2024 -
So I saw an article recently that was talking about minimizing the use of ternary operators where possible and reflecting on my own use of them especially in JSX, I have a few questions...
Before I get decided to post my questions, I checked React subs and most discussions on this are a couple years old at least and I thought perhaps views have changed.
Questions:
Is the main issue with using nested ternary operators readability?
I have found myself using ternary operators more and more lately and I even have my own way of formatting them to make them more readable. For example,
info.type === "playlist"
? info.creationDate
? <div className="lt-info-stats">
<span className="text pure">Created on {info.creationDate}</span>
</div>
: null
: info.type === "artist"
? <div className="lt-info-stats">
<span className="text pure">{info.genre}</span>
</div>
: <div className="lt-info-stats">
<span className="text pure">{info.releaseDate}</span>
<span className="cdot" style={{ fontWeight: "bold", margin: "1px" }}>·</span>
<span className="text pure">{info.genre}</span>
</div>When written like this, I can visually see the blocks and tell them apart and it looks a lot like how an if/else might look.
nested ternary operator formatting2. What is the preferred formatting of ternary operators in general and what do you think should be done to make them more readable?
3. How do people feel about nested ternary operators today? How big of a nono is it to have them in code (if it is a nono)?
I would love you know peoples thoughts on ternary operators in React in general as well.
Thanks for your attention!
Top answer 1 of 45
99
Chained (or nested) ternary operators are very bad. They make code impossible to read. Use switch/case instead. Or if/else. Single ternary operator might be useful, though. But not for JSX tags. PS Set up ESLint and prettier. They can help you to solve such questions.
2 of 45
25
The main readability issue with ternaries is the lack of grouping symbols compared to if/else statements. If you use parentheses to group sub-expressions and don’t get too excessive with them I don’t see why it should be a readability concern. After all “?” is a direct replacement for “if” and “:” is a direct replacement for “else”, the only difference between the two notations is the placement of the if and the need for return statements.
Videos
07:12
Javascript Ternary Operators | JSBabySitting [Part 9] - YouTube
11:43
Javascript Ternary Statement Nested Ternary Nested Ternary - YouTube
00:43
Nested Ternary Operator In JavaScript!? - YouTube
05:43
Ternary Operator || Conditional Operator | Nested Ternary Operator ...
03:14
Use Multiple Conditional (Ternary) Operators - Free Code Camp - ...
06:10
01. Nested Ternaries // JavaScript Codecasts - YouTube
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Conditional_operator
Conditional (ternary) operator - JavaScript | MDN
The ternary operator is right-associative, which means it can be "chained" in the following way, similar to an if … else if … else if …
Sonar
sonarsource.com › blog › stop-nesting-ternaries-javascript
Stop nesting ternaries in JavaScript | Sonar
December 7, 2023 - This has come after years of ... clearer: stop nesting them. The ternary operator is an alternative to if/else for making decisions based on a condition....
Reddit
reddit.com › r/learnjavascript › nested ternary operators!!
r/learnjavascript on Reddit: Nested ternary operators!!
January 19, 2025 -
Hi
I never use ternary operators, but I'm willing to learn and give it a shot for my next personal project.
My question is, i confused myself now trying to do a nested ternary operator.
For example a typical ifelse nested statement looks like this
if (example1 === 1) {
if (example2 === 2) {
console.log("yes")
}
else if (example2 === 3 {
console.log("no")
}
else {
return example3
}else if (example2 === 2) {
if (example 3 === 3) {
console.log("yes")
}
else {
return example3
}else {
console.log ("i know this example suck")
}
how do i do the exact nesting in ternary operators, i googled but got more confused.
Top answer 1 of 5
3
Statements , like return ... (the "return statement"), cannot be placed inside ternary operators — only expressions can be placed inside the ternary operator. Therefore, this code cannot be changed to use ternary operators.
2 of 5
1
Your code was messed up, so I took some guesses to fix it. if (example1 === 1) { if (example2 === 2) { console.log("yes"); } else if (example2 === 3) { console.log("no"); } else { return example3; } } else if (example2 === 2) { if (example 3 === 3) { console.log("yes"); } else { return example3; } } else { console.log ("i know this example suck"); } You can have expressions (but not returns) within a ternary. A ternary expression returns a value, so is generally used to return a value with some conditional branches, as one statement. In keeping with that, I'll change the if statement version to this: var result; if (example1 === 1) { if (example2 === 2) { result = "yes"; } else if (example2 === 3) { result = "no"; } else { return example3; } } else if (example2 === 2) { if (example 3 === 3) { result = "yes2"; } else { return example3; } } else { result = "final"; } You can replace features of an if statement with the equivalent from a ternary. And you can use newlines just fine, and even brackets to help you visualise the structure. ...
Medium
medium.com › javascript-scene › nested-ternaries-are-great-361bddd0f340
Nested Ternaries are Great. Note: This is part of the “Composing… | by Eric Elliott | JavaScript Scene | Medium
February 28, 2018 - Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There’s a lot more of this to come! < Previous | << Start over at Part 1 | Next > Conventional wisdom would have you believe that nested ternaries are unreadable, and should be avoided.
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-ternary-operator
JavaScript Ternary Operator - GeeksforGeeks
The ternary operator can be nested, allowing you to perform multiple conditional checks in a single line of code.
Published January 15, 2026
Codecademy
codecademy.com › forum_questions › 4f2343035ed3e90001012641
Can you create a nested ternary operator? | Codecademy
I always prefer using if statements, they have a nice structure to them and are very intuitive if you use {} and indent each nested if. ... it’s also good to space out the binary operators like necro did. I actually space out after the parenthesis too. if ( i < n ) { etc etc ... I am learning JavaScript right now, but if my memory serves correctly for C# you cannot use ternary operators for nested if statments.
DEV Community
dev.to › wizdomtek › mastering-the-javascript-ternary-operator-a-comprehensive-guide-5388
Mastering the JavaScript Ternary Operator: A Comprehensive Guide - DEV Community
October 27, 2024 - Maintain Readability: If the ternary operator makes the code less readable, opt for an if...else statement. The condition is simple and straightforward. You want to assign a value based on a condition. It enhances code conciseness without sacrificing readability. Dealing with complex conditions or multiple nested conditions. The expressions involve side effects or multiple statements. Readability is compromised. The JavaScript ternary operator is a powerful tool for writing cleaner and more concise code.
SitePoint
sitepoint.com › javascript
Multiple lines in a ternary operator's clauses? - JavaScript - SitePoint Forums | Web Development & Design Community
January 22, 2015 - Continuing the discussion from Ternary if() elseif() else: How can you have multiple var declarations for example in the second expression (I mean the “else” clause)? Can you just separate each declaration with a semic…
DEV Community
dev.to › vitiok78 › comment › 1ha52
Nested ternary operator is a pure evil. Just. Don't. Use. It. Never. Thank me... - DEV Community
August 18, 2021 - Totally agree here, please don't use ternary operator if it's going to have 2 levels. Next de will have to give more time to understand it. Just use, if else.. no harm in that.. But that being said, a great article bro. Few shortcodes are really helpful.👍 ... Started as tech enthusiast, later developed keen interest in programming. I have always been interested in learning new technical things, solving problems. ... I've never seen any problem at all with using nested ternary operators especially in React component code.
Medium
medium.com › codingbeauty-tutorials › javascript-nested-ternary-operator-dc28551fb8c3
How to Use the JavaScript Nested Ternary Operator | Coding Beauty Tutorials
August 1, 2023 - Learn how to use the nested ternary operator in JavaScript to replace switch statements and if…else if…else statements.
freeCodeCamp
freecodecamp.org › news › the-ternary-operator-in-javascript
JavaScript Ternary Operator – Syntax and Example Use Case
January 6, 2023 - What if you wanted to achieve an if...else if...else statement with a ternary operator? Then you can use nested ternary operators.
W3Schools
w3schools.com › c › c_conditions_short_hand.php
C Short Hand If ... Else (Ternary Operator)
There is also a short-hand if...else, known as the ternary operator because it uses three operands.
DEV Community
dev.to › junihoj › why-nested-ternary-operators-are-bad-practice-a-guide-for-developers-ki1
Why Nested Ternary Operators Are Bad Practice: A Guide for Developers - DEV Community
January 10, 2025 - Reduced Readability: The primary issue is readability. Nested ternaries force the reader to decipher complex logic in a single line or block, increasing the chance of misunderstanding the code.
Scaler
scaler.com › home › topics › javascript › javascript ternary operator
JavaScript Ternary Operator - Scaler Topics
February 19, 2024 - Ternary Operator in Javascript makes our code clean and simpler. It can be chained like an if-else if....else if-else block. It can also be nested like a nested if-else block.
LogRocket
blog.logrocket.com › home › how to use the ternary operator in javascript
How to use the ternary operator in JavaScript - LogRocket Blog
February 21, 2025 - In our code, we assume the user is a senior citizen, so they get the discount. Using the ternary operator, we have: // Nested ternary way (use carefully!) let age = 65; let ticketPrice = age >= 65 ? "Senior discount: $10" : age >= 18 ?
DEV Community
dev.to › accreditly › dont-nest-ternary-operators-please-1g08
Don't nest ternary operators. Please! - DEV Community
January 25, 2024 - Nesting ternary operators means using one ternary inside another.
ESLint
eslint.org › docs › latest › rules › no-nested-ternary
no-nested-ternary - ESLint - Pluggable JavaScript Linter
/*eslint no-nested-ternary: "error"*/ const thing = foo ? bar : baz === qux ? quxx : foobar; foo ? baz === qux ?
Plain English
plainenglish.io › home › blog › javascript › how to use the javascript nested ternary operator
How to Use the JavaScript Nested Ternary Operator
May 17, 2022 - We can nest a ternary operator as an expression inside another ternary operator. We can use this to replace if…else if…else statements and switch statements. For example, we could have a piece of code that sets the English word for the numbers ...