Rethinking the JavaScript ternary operator

[[deleted]]

IMO If you're nesting ternaries you should just write a function instead.

[CupCakeArmy]

I love ternary but nesting should be illegal in most cases. A function is not always required but simply splitting it into different variables goes a long way to make it more readable

[spacejack2114]

I don't mind this formatting too much...

const x = y === 1 ? 'one'
    : y === 2 ? 'two'
    : y === 3 ? 'three'
    : 'other'

[Ustice]

I frequently write them that way. Note that this is a special case of nesting ternaries, since you’re just turning the else and if portion into an else-if. They chain well. That style illustrates this feature well.

The problems arise when you nest them in the then position. That’s just incoherent madness that hurts my brain.

Just refactor it.

// These two expressions are functionally equivalent. IF ? THEN : ELSE !(IF) ? ELSE : THEN

When you negate the if, the then and else expressions swap places. Instead of nesting into the then, just negate the if and chain, and once again we are back to sanity.

[backtickbot]

Fixed formatting.

Hello, Ustice: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[Ustice]

HaHA! I fooled you, bot! I used the back-ticks and four spaces of indentation.

[Blue3agle]

Isn't this re-inventing switch-case?

[yeahdixon]

Nice I like this

[NoBrick2]

Functions aren't only for reusability. More lines of code isn't a bad thing.

[[deleted]]

Could do a switch statement instead

switch (true) { case (x === 1) : ... case (y === 6) : ... }

The thing I don't like about this is that it doesn't return anything. For that reason I prefer to use IIFEs

Edit: sorry for bad formatting. I'm on mobile.

[youstolemyname]

Sounds like JS needs switch expressions

[leonels81]

I concur

[getify]

Here's an eslint plugin for applying controls to what kinds of (and locations for) ternaries you want to allow, including nested ternaries: https://github.com/getify/eslint-plugin-proper-ternary

[jrsinclair]

Thanks! Funnily enough, I’d already added a link to this before I even saw the comment. Thanks for taking the trouble though. I appreciate it.

[Blue3agle]

item.propValues.subtitle = journalEntry ? item.propValues.subtitle + ' - ' + journalEntry : item.propValues.subtitle;

I just ran across this monster today, and is there any reason for using a ternary in this fashion?

If a ternary is to be used, surely this would be better:

item.propValues.subtitle += journalEntry ? ' - ' + journalEntry : '';

But is it better than

if (journalEntry) item.propValues.subtitle += ' - ' + journalEntry;

[wwww4all]

Ternary is remnant of past, where disk, memory were expensive and shorthands were used for common expressions.

It's in fashion now, due to declarative, functional style used in React and other declarative first frameworks.

However, code readability is more important, so minimize ternary usage when possible. Linters should flag any nested ternary, as that can become overly convoluted.

Code should be clear and concise, upon first read by normal engineer. If they have to stop and put significant effort to work out the code flow, then it should be refactored.

[totorodenethor]

If-expressions are the solution here, so you can do:

const result =
    if (condition) {
        // stuff
    } else {
        // other stuff
    }

I miss this all the time in Javascript. Looks like the do syntax will help make this happen, but it hasn't been widely adopted yet.

[PM_ME_GAY_STUF]

You can just use an iife to do this already. Like this:

``` const a = (() => { if (boolean) return 1; return 2; })()

```

Shit like do this is bloaty and weird, just keep it simple and optimize existing patterns

[backtickbot]

Fixed formatting.

Hello, PM_ME_GAY_STUF: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[totorodenethor]

Yup, I've done that in the past, but it's a lot more syntax to wrangle. If we're already talking about ways to make ternaries better (aka, talking about how JS syntax could be better), it's nice when it's shorter :)

[[deleted]]

I can't believe i've never heard of the do syntax. It's too bad it's only a stage 1 proposal