Javascript: Where to place operators in a multi-line ternary?

[pconerly]

My team uses airbnb's styleguide as our default for coding style, although we do deviate occasionally.

Does airbnb have an opinion on where the operators should go in a multi-line ternary?

It's not specifically talked about anywhere, but there is the example:

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

one of our engs prefers this, with the justification that it's easier to read. If you read the first line by itself, then having the ? at the end lets you know that this is a ternary and is continuing. Otherwise, if you're skimming the code very fast, you might think that you're assigning foo a boolean value.

const foo = maybe1 > maybe2 ?
  'bar' :
  maybeNull;

And again, we're using multi-line ternaries because we have some long expressions and values to be assigned.

[ljharb]

Currently https://github.com/airbnb/javascript#comparison--nested-ternaries does permit multiline ternaries, although it discourages them. I'd strongly encourage you to use let and if/else rather than multiline ternaries.

That said, the former is the only style I would expect to see one:

const foo = condition
  ? a
  : b;

[rsolomon]

I'd strongly encourage you to use let and if/else rather than multiline ternaries.

Can you elaborate on why you feel that to be the correct approach? Type safety is much easier when you disallow mutations and discourage nullable objects. Ternaries meet both criteria, whereas let often necessitates a host of additional checks.

[ljharb]

@rsolomon I'm not sure why type safety comes into play when you're talking about assignments; nor am I sure what you mean by "nullable objects".

If you want to use a ternary so you can use const, that's great! In that case, use lots of intermediate variables so that you never need to split a ternary across multiple lines.

[rsolomon]

You're right, I misinterpreted your statement as discouraging ternaries in general, not just multilines.

[NicholasTancredi]

return ( multiline === 'example' ) ? (
    <Foo />
) : (
    <Bar />
)

// EDIT
return multiline ? (
    <Foo />
) : (
    <Bar />
)

[ljharb]

Aside from the spaces inside the conditional parens, and the redundant parens around said conditional, that's indeed exactly how I'd expect multiline ternaries in JSX to be indented.

[patricio-ezequiel-hondagneu-roig]

I tend to use the following format:

const foo = ( condition )
    ? a
    : b;

[ljharb]

That works well for normal code; but for jsx, i find it makes the indentation awkward.

[Zamiell]

This issue can be probably be closed now - the main style guide has a pretty good section on ternaries as of the time of this writing.