JavaScript shorthand if statement, without the else portion

Question

So I'm using a shorthand JavaScript if/else statement (I read somewhere they're called Ternary statements?)

this.dragHandle.hasClass('handle-low') ? direction = "left" : direction = "right"

This works great, but what if later I want to use just a shorthand if, without the else portion. Like:

direction == "right" ? slideOffset += $(".range-slide").width()

Is this possible at all?

Solution 1

you can use && operator - second operand expression is executed only if first is true

direction == "right" && slideOffset += $(".range-slide").width()

in my opinion if(conditon) expression is more readable than condition && expression

Solution 2

Don't think of it like a control-block (ie: an if-else or a switch). It's not really meant for running code inside of it.

You can. It just gets very ugly, very fast, which defeats the purpose.

What you really want to use it for is ASSIGNING VALUES.

Taking your initial example and turning it on its head a little, you get:

direction = (this.dragHandle.hasClass("handle-low")) ? "left" : "right";

See. Now what I've done is I've taken something that would have required an if/else or a switch, which would have been used to assign to that one value, and I've cleaned it up nice and pretty.

You can even do an else-if type of ternary:

y = (x === 2) ? 1 : (x === 3) ? 2 : (x === 4) ? 7 : 1000;

You can also use it to fire code, if you'd like, but it gets really difficult after a while, to know what's going where (see the previous example to see how even assignment can start looking weird at a glance)...

((this.dragHandle.hasClass("...")) ? fireMe(something) : noMe(somethingElse));

...this will typically work.

But it's not really any prettier or more-useful than an if or a branching, immediately-invoking function (and non-JS programmers, or untrained JS programmers are going to crap themselves trying to maintain your code).

Solution 3

The conditional operator is not a shorthand for the if statement. It's an operator, not a statement.

If you use it, you should use it as an operator, not as a statement.

Just use a zero value for the third operand:

slideOffset += direction == "right" ? $(".range-slide").width() : 0;

Solution 4

What you have will not work, but why not just use a one line if statement instead.

if(direction == "right") slideOffset += $(".range-slide").width();

This involves less typing than the method Ray suggested. Of course his answer is valid if you really want to stick to that format.

Solution 5

No, This is not possible, because ternary operator requires, three operands with it.

first-operand ? second-operand (if first evaluates to true) : third-operand (if false)

View more solutions

Comments

[Ray Toal]

The technical term for these fragments are conditional expressions, which use the conditional operator_ ?:. Because this operator takes three operands, it is called a ternary operator.

[Muhammad Umer]

2 times faster jsperf.com/speed-test-for-conditions

[ajax333221]

"untrained JS programmers are going to crap themselves trying to maintain your code" I couldn't have said it better

[ahren]

will probably stick with if(condition) expression - but good to know the && operator works in this situation!

[hsobhy]

I have used before double quotes and worked... something like >>> direction == "right" ? slideOffset += $(".range-slide").width() : "" .... so does this make any problems?

[ewahner]

Is there a name for this type of inline assignment?

[omikes]

slideOffset += direction == "right" && $(".range-slide").width() also works, and keeps the operator at the beginning.

[Noob]

this won't work in angular production build. It will throw 'An expression of type 'void' cannot be tested for truthiness'

[Bergi]

@ewahner It's called an "antipattern" :-)