Ternary return expression

[backspaces]

I ran into a problem with ternary return functions. I got an eslint warning when I used this form:

  pixelToUint8s (pixel, sharedOK = false) {
    this.sharedPixel[0] = pixel
    return sharedOK ? // eslint-disable-line
      this.sharedUint8s : new Uint8ClampedArray(this.sharedUint8s)
  },

Standard warned: ? should be placed at the beginning of the line, i.e.

  pixelToUint8s (pixel, sharedOK = false) {
    this.sharedPixel[0] = pixel
    return sharedOK
      ? this.sharedUint8s : new Uint8ClampedArray(this.sharedUint8s)
  },

But for all us no-semis folks, we know that return is odd beyond belief! I wanted the ? on the return line to flag that there is more to the return expression. I guess I could put the expression in parens?

The second form does work, but I don't know why, given return's oddnesses.

I realize Standard is rigid on purpose, but I'd like the first form to be OK, mainly for return statements. My guess is eslint itself makes this difficult? Maybe I should get over return fear .. is there a good description somewhere for what the return syntax rules are?

[LinusU]

I think it's very scary to have the ?, to be honest I didn't expect it to work. Personally I feel that when I read return sharedOk followed by a newline, the function has returned, maybe that's just me though...

[backspaces]

Oh good, I'm not the only one concerned about return rules! Thanks.

Does anyone have a pointer to the exact rules for return for semi-less, auto semi insertion, javascript syntax/rules?

[feross]

If you're using standard, it's pretty darn near impossible to mess up return because you will get a warning.

Dead code is not allowed after return since it almost always means the programmer made an error. I think you can rest easy and not worry about it too much.

@backspaces we know that return is odd beyond belief!

I actually think the fear around return is overblown. Specifically, the example that _everyone_ always uses for why omitting semicolons is dangerous is baloney:

return
5

gets interpreted as:

return;
5;

But this would also be wrong if you use semicolons!

return
5;

also gets interpreted as:

return;
5;

Takeaway: You still need to understand automatic semicolon insertion even if you always use semicolons in your code. Semicolons won't save you.

The rule to remember about automatic semicolon insertion is: If inserting a semicolon at the end of the line would be syntactically valid, then that's what the JS engine will do.

Hence why this works just fine:

return condition
  ? 6000
  : 1000

Putting a semicolon after condition would be a syntax error:

return condition;  // <-- this doesn't make sense
  ? 6000
  : 1000

So it doesn't get inserted.

(Thanks for indulging my rant ;)

[backspaces]

Thanks! .. although

return condition ?
  veryLongTrueValue : veryLongFalseValue

would also be valid, no? Inserting a semi after the ? would also be invalid. And the ? is a sure signal of continuing the expression to the next line.

None the less, its great to have such a clear explanation .. I'll close the issue.

[joeysino]

Yes it's valid Javascript. It's just not standard-style. ;)

I think it's a bit like the discussion around leading or trailing commas. You can either signal continuation at the end of the line, or you can signal continuation at the beginning of the line. But you can't do both!

Let's just take a look at the two cases:

return condition ?
  veryLongTrueValue :
  veryLongFalseValue

or:

return condition
  ? veryLongTrueValue
  : veryLongFalseValue

I feel the second one looks tidier and clearer than the first one. The leading symbol indicates whether the following value will be the if-true or if-false value.