How to write in shorthand form if / else if / else?

Question

Is there a shorthand for an if / else if / else statement? For example, I know there's one for an if / else statement:

var n = $("#example div").length;
$("body").css("background", (n < 2) ? "green" : "orange");

But how do I write the following in the shorthand syntax like above?

var n = $("#example div").length;

if (n < 2) {
    $("body").css("background", "green");
}
else if (n > 2) {
    $("body").css("background", "blue");
}
else {
    $("body").css("background", "orange");
}

`cond1 ? expr1 : (cond2 ? expr2 : expr3);` (parentheses not necessary in this case). — Zeta, Sep 10 '14 at 20:42
Your use of a ternary is appropriate in the first case. But I would *not* use such a statement in the second case (where there are three or more possibilities) because it becomes much much more difficult to read later. — nzifnab, Sep 10 '14 at 20:42
@Zeta that is exactly the kind of ternary I would avoid. Nested ternaries are generally considered code smells/bad practice. — nzifnab, Sep 10 '14 at 20:43
Agreed, nested ternaries are harder to read. One thing you could consider (makes the code more DRY and maybe easier to change later): have a `colour` variable, use if/elseif/else to set the `colour` variable, then only call `$("body").css(...)` once. — Shai, Sep 10 '14 at 20:49
@nzifnab: Well, the question was about "how do I write it in shorthand". I don't really recommend it, but when you _do_ use this kind of notation, at least use a proper layout (which I can't use in this comment). — Zeta, Sep 10 '14 at 20:50
Sometimes the answer to a question should just be "You don't need to" :P Or do what @Shai suggested. If you get into the habit of multi-conditional ternaries, you'll be in a world of hurt when you [try to use them in PHP](http://phpsadness.com/sad/30). (But maybe that's more an indictment of the awfulness that is PHP) — nzifnab, Sep 10 '14 at 21:46

score 1 · Accepted Answer · answered Sep 10 '14 at 20:51

1

It is exist but it's highly UN recommended because it's pretty hard to read and maintain.

var n = $("#example div").length,
    color;

color = (n < 2) ? 'green' : 
        (n > 2) ? 'blue'  : 'orange';

$("body").css("background", color);

answered Sep 10 '14 at 20:51

Michael Malinovskij

1,422
8
21

@GTSJoe like he said, it's NOT recommended. I would argue that this is worse than just using `if` statements. – nzifnab Sep 10 '14 at 21:38
If you are going to use this approach, I recommend nesting each ternary operation so that it's readable. Ultimately, you're probably better with an if/else if/else once you get beyond a couple of conditions. – Nathan Taylor Sep 11 '14 at 02:14

score 0 · Answer 2 · answered Sep 10 '14 at 20:51

0

Ternaries are fine if you use line breaks:

$( 'body' ).css( 'background',
      (n < 2) ? 'green'
    : (n > 2) ? 'blue'
    :           'orange'
);

Everyone has their syntactical preferences, but I think that's perfectly readable.

answered Sep 10 '14 at 20:51

Mark Kahn

81,115
25
161
212

score 0 · Answer 3 · answered Sep 10 '14 at 20:55

There's no shorthand.

I'd also like to point out that the ?: operator is not a shorthand. One's an expression, the other is a statement.

If you'd like to make this code more concise anyway, I'd suggest getting rid of the braces:

if (n < 2)      $("body").css("background", "green");
else if (n > 2) $("body").css("background", "blue");
else            $("body").css("background", "orange");

score -1 · Answer 4 · answered Sep 10 '14 at 20:48

You can use a ternary for this, but I would recommend against (it's bad style). You can also go with a switch statement:

switch(true) {
    case (n<2):
        $("body").css("background", "green");
        break;
    case (n>2):
        $("body").css("background", "blue");
        break;
    default:
       $("body").css("background", "orange");
}

But that's not really any better than just sticking with if

How to write in shorthand form if / else if / else?

4 Answers4