JS style guide: Formatting ternary expressions

[jquery]

JS style guide: Formatting ternary expressions

[nordfjord]

You've left out a 4th option.

I'm commenting here because this was the top result when googling "Javascript ternary formatting"

parts = typeof value === "string" 
  ? value.split(" ")
  : [ value ];

[mgol]

IMHO it should be either the first or the second one (both can co-exist depending on expression length) but I'd avoid the third one.

[timmywil]

@mzgol 👍

[ryanneufeld]

The first two are my preference as well.

Though I wonder about the second. I you need to break an inline ternary like that, perhaps an 'if' statement is a better choice.

[timmywil]

I'd prefer a ternary with line breaks over a large if statement.

[gibson042]

@mzgol @timmywil 👍

[jzaefferer]

I'll put together a PR for this once the existing ones are merged.

[dmethvin]

Agreed with above; the rule about when you must break can be governed by the line length enforced by jshint.

[scottgonzalez]

Agreed on first and second, but not the third. Who's managing that project anyway? :-P

[NotDaze]

I usually prefer the first, but the second is more clear for comments if you're documenting all of it.

[Made-of-Clay]

Following up a bit late in the conversation, I had a discussion with a co-worker on why to choose @nordfjord's 4th option vs @jzaefferer's 2nd option. It came down to how the author interprets the meaning of ? and : in the expression.

4th Option
My preferred style, the ? and : are viewed as the beginnings of the if and else statements respectively.

parts = typeof value === "string" 
  ? value.split(" ")
  : [ value ];

2nd Option
My co-workers style, the ? and : are viewed as the endings of the condition and if statement respectively, while the ; marks both the end of the else statement and the end of the ternary itself.

parts = typeof value === "string" ?
  value.split(" ") :
  [ value ];

Understanding this now, I am more accepting of either style, despite preferring the 4th option; I like the 4th because the symbols basically introduce the beginning of the differences. That is particularly helpful when the if/else statements become complex or long.

And that's my 2.5-years-after-the-fact note. Happy dev-ing!