const withTernary = ({\r\n conditionA, conditionB\r\n}) => (\r\n (!conditionA)\r\n ? valueC\r\n : (conditionB)\r\n ? valueA\r\n : valueB\r\n);<\/code><\/pre>\nThe most interesting thing Eric is doing there is negating the first condition so that you don\u2019t end up with the question marks and colons together, which makes it harder to read. I would take this a step further and add a little indentation. I also added the curly braces and an explicit return because seeing one parenthesis and then immediately another makes my brain start to anticipate a function invocation that is never coming.<\/p>\n
const withTernary = ({ conditionA, conditionB }) => {\r\n return (\r\n (!conditionA)\r\n ? valueC \r\n : (conditionB)\r\n ? valueA\r\n : valueB\r\n )\r\n}<\/code><\/pre>\nAs a general rule, I think that you should consider not nesting ternaries or if<\/code> statements. Any of the above articles on Hacker News will shame you into the same conclusion. Although I\u2019m not here to shame you, only to suggest that perhaps (and just maybe) you will thank yourself later if you don\u2019t.<\/p>\n
\nThat\u2019s my pitch on the misunderstood ternary and logical operators. I think that they help you write clean, readable code and avoid if<\/code> statements entirely. Now if only we could get Linus Torvalds to sign off on all this as being \u201cgood taste.\u201d I could retire early and and live the rest of my life in peace.<\/p>\n","protected":false},"excerpt":{"rendered":"Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you\u2019re new to this idea (like I was), you\u2019re in a for a real treat. Just search for “if statements” on Hacker News. You’ll get articles proposing that you might […]<\/p>\n","protected":false},"author":250411,"featured_media":286207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"In Defense of the Ternary Statement","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[432,1626],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/js-ternary.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":285175,"url":"https:\/\/css-tricks.com\/undefined-the-third-boolean-value\/","url_meta":{"origin":285290,"position":0},"title":"Undefined: The Third Boolean Value","date":"April 5, 2019","format":false,"excerpt":"I wanted to implement a notification message in one of my projects, similar to what you\u2019d see in Google Docs while a document is saving. In other words, a message shows up indicating that the document is saving every time a change is made. Then, once the changes are saved,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/concentric.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":277912,"url":"https:\/\/css-tricks.com\/building-skeleton-components-with-react\/","url_meta":{"origin":285290,"position":1},"title":"Building Skeleton Components with React","date":"October 22, 2018","format":false,"excerpt":"One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user\u2019s perceived performance by\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/skelelton-react.gif?fit=700%2C350&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268257,"url":"https:\/\/css-tricks.com\/react-code-style-guide\/","url_meta":{"origin":285290,"position":2},"title":"React Code Style Guide","date":"March 27, 2018","format":false,"excerpt":"I've been having the time of my life with React lately. But on my journey, I\u2019ve had a hard time finding good code style guidelines to keep the mix of JSX and JS clean and readable. I've been coming up with my own style guides that I'd love to share.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197463,"url":"https:\/\/css-tricks.com\/wordpress-front-end-security-csrf-and-nonces\/","url_meta":{"origin":285290,"position":3},"title":"WordPress Front End Security: CSRF and Nonces","date":"March 24, 2015","format":false,"excerpt":"In our last article, we covered Cross-Site Scripting (XSS) and the functions WordPress provides to prevent XSS attacks. Today, we'll look at another security concern for front end developers: Cross-Site Request Forgery (CSRF). Lest you think this security stuff isn't important, a major vulnerability was recently found in the WP\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":167528,"url":"https:\/\/css-tricks.com\/shoptalk-special-one-one-hacker\/","url_meta":{"origin":285290,"position":4},"title":"ShopTalk Special: One on One With a Hacker","date":"April 3, 2014","format":false,"excerpt":"This is worth linking up directly from here, as it's this very site the hacker was targeting. And then later, me.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":361200,"url":"https:\/\/css-tricks.com\/cycle-through-classes-html-element\/","url_meta":{"origin":285290,"position":5},"title":"How to Cycle Through Classes on an HTML Element","date":"January 26, 2022","format":false,"excerpt":"Say you have three HTML classes, and a DOM element should only have one of them at a time:
<\/div>
<\/div>
<\/div> Now your job is to rotate them. That is, cycle through classes on an HTML element. When some event occurs, if the element has state-1\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/reset-refresh-recycle-default.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/js-ternary.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285290"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250411"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=285290"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285290\/revisions"}],"predecessor-version":[{"id":285299,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285290\/revisions\/285299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/286207"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=285290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=285290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=285290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}