I've never seen any problem at all with using nested ternary operators especially in React component code. Just set up your eslint right and it will consistently format it for you. With nested ternaries you have 2 cases:
Tree-like nesting:
cond1
? cond2 // if
? opt1 // if
: opt2
: opt3
chained nesting:
cond1 // if
? opt1
: cond2 // else if
? opt2
: opt3 // else
It's even worse because it's tricky and uncommon.
"If" "else" are more straightforward.
But I consider using "else" as a bad practice because it complicates the logic in readability context.
Break this logic into the smaller functions or methods and use early return inside those functions instead of "else". And the code will be clean, readable and easily refactored. The person who will work with it later will thank you a lot.
Saying tricky and uncommon is pretty subjective. From my subjective point of view in codebases of our projects at work it's nothing unusual to find ternary operators and no one is complaining.
As I've said it's especially useful in React code since you can't write if statements there. Let's say you want to conditionally show some data that is fetched asynchronously.
And another option would be to make some helper methods or nested component so you can use the if/else statements there.
Personally, I prefer the first option. It's the most scale-able since if you want to add a condition you don't have to update the last one and it's the least overhead.
It is exactly one of the many reasons why I prefer Vue over React. That ugly JSX mess that mixes JavaScript logic and kinda HTML markup is awful. Separate template engine is always better. Other languages figured it out long time ago. Even in PHP they prefer to use Twig rather than mixed mess.
Started as tech enthusiast, later developed keen interest in programming. I have always been interested in learning new technical things, solving problems.
Hello friend! I am Lalit, nice to see you here. I am a frontend developer and I post articles related to frontend development both web and mobile. If that interests you consider following. Thank you!
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.
Nested ternary operator is a pure evil. Just. Don't. Use. It. Never.
Thank me later.
Agree!
I've never seen any problem at all with using nested ternary operators especially in React component code. Just set up your eslint right and it will consistently format it for you. With nested ternaries you have 2 cases:
It's not that complicated.
It's even worse because it's tricky and uncommon.
"If" "else" are more straightforward.
But I consider using "else" as a bad practice because it complicates the logic in readability context.
Break this logic into the smaller functions or methods and use early return inside those functions instead of "else". And the code will be clean, readable and easily refactored. The person who will work with it later will thank you a lot.
Saying
tricky and uncommon
is pretty subjective. From my subjective point of view in codebases of our projects at work it's nothing unusual to find ternary operators and no one is complaining.As I've said it's especially useful in React code since you can't write if statements there. Let's say you want to conditionally show some data that is fetched asynchronously.
And this is pretty common example I would say. Other option would be to use
&&
operators.And another option would be to make some helper methods or nested component so you can use the
if/else
statements there.Personally, I prefer the first option. It's the most scale-able since if you want to add a condition you don't have to update the last one and it's the least overhead.
It is exactly one of the many reasons why I prefer Vue over React. That ugly JSX mess that mixes JavaScript logic and kinda HTML markup is awful. Separate template engine is always better. Other languages figured it out long time ago. Even in PHP they prefer to use Twig rather than mixed mess.
Vue:
P.S. BTW else-if and else look natural and clean in template but they are bad inside JavaScript code at the same time
JSX is an abomination - makes me want to vomit every time I see it 🤮
Wow, That is a beautiful explanation.
Thanks for explaining it so easily
Agreed nested ternary just looks gross. I don't even really like multi line ternerys. Use a switch or an if else
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.👍
Thanks