41

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?

ahren
  • 15,967
  • 5
  • 44
  • 67
  • 3
    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. – Ray Toal Jul 19 '12 at 05:36
  • 2
    2 times faster http://jsperf.com/speed-test-for-conditions – Muhammad Umer Jul 04 '13 at 21:48

7 Answers7

63

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

Andrey Sidorov
  • 22,962
  • 4
  • 58
  • 73
  • 1
    will probably stick with `if(condition) expression` - but good to know the `&&` operator works in this situation! – ahren Jul 19 '12 at 08:11
  • I have used before double quotes and worked... something like >>> direction == "right" ? slideOffset += $(".range-slide").width() : "" .... so does this make any problems? – hsobhy Apr 26 '16 at 00:14
  • Is there a name for this type of inline assignment? – ewahner Oct 06 '16 at 13:22
  • `slideOffset += direction == "right" && $(".range-slide").width()` also works, and keeps the operator at the beginning. – omikes Dec 14 '17 at 00:50
  • this won't work in angular production build. It will throw 'An expression of type 'void' cannot be tested for truthiness' – Noob Nov 08 '19 at 11:44
9

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

Norguard
  • 24,349
  • 4
  • 38
  • 45
  • 1
    "_untrained JS programmers are going to crap themselves trying to maintain your code_" I couldn't have said it better – ajax333221 Jul 19 '12 at 06:27
4

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;
Guffa
  • 640,220
  • 96
  • 678
  • 956
3

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.

twiz
  • 6,335
  • 5
  • 35
  • 67
2

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)
Yograj Gupta
  • 9,638
  • 3
  • 25
  • 45
1

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!

omikes
  • 6,140
  • 8
  • 33
  • 44
Dale
  • 981
  • 2
  • 8
  • 20
1

you can use && operator

direction == "right" && slideOffset += $(".range-slide").width()
E.outmane
  • 21
  • 2