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?

Answer 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

Answer 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).

Answer 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;

Answer 4

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)

Answer 5

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.

Answer 6

This doesn't exactly answer your question, but ternaries allow you to write less than you've shown:

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

And now that I think about it, yeah, you can do your question too:

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

This is a theory. The next time I have an opportunity to += a ternary I will try this. Let me know how it works!