Ternary Statements in Javascript: pitfalls of no assignment?

Question

Sometimes I use ternary statements to simplify & reduce the length of my code.

Ternary statements are traditionally used to assign a value to a variable, but in JS I can also write ternary statements with no assignment to execute differing outcomes based on the boolean response to the question - example:

anyVariable > someValue ? 
    funcOne(anyVariable): 
    funcTwo(anyVariable);

This code throws no errors, but jsLint complains that it saw an expression where it expected an assignment or function call.

Are there any pitfalls or potential issues I should be aware of when using ternary statements (in Javascript) in this fashion?

I'd avoid it just on the basis that it reads poorly as opposed to a standard if/else construct. — mccainz, Jan 17 '14 at 16:32
Using ternary statements instead of if / else may be technically possible and "shorter" but it certainly does not improve your code. The potential issue is that anyone else looking at your code (and this may include you in 6 months) will not understand it anywhere near as easily as if you had used the appropriate construct. Besides, after you minify your JS, it isn't much shorter anyway. — veddermatic, Jan 17 '14 at 16:34
Not a complete answer, but I actually happened to test the performance between a standard `if/then` structure and its ternary equivalent yesterday, for another SO question, and the performance values were pretty similar, with a very slight advantage when using the `if/then` with some browsers. — talemyn, Jan 17 '14 at 16:37
mccainz & @veddermatic I really don't agree that this reads poorly. Perhaps people are less familiar with it - but aside from familiarity this is very easy to read. This is not some crazy nested complex statement. Are you actually confused as what is happening in this statement because of the syntax? — 1nfiniti, Jan 17 '14 at 16:49
I hate to break it to you, but you are wrong. If your code means "if X, do Y, else do Z" then you should _use an **if** statement_ since it is both consistent with the intent of the code and clearly obvious to anyone who reads it. — veddermatic, Jan 17 '14 at 16:55
This is really an opinion based question as shown by the arguments provided in answers and up here. — tkone, Jan 17 '14 at 17:03

Ivey · Accepted Answer · 2014-01-17T16:43:22.580

There should not be any pitfalls in this fashion. Consider the following statement -

b = a = 10;

we can omit the "b=" portion of the statement without any issues. And its the same case for the ternary statements.

Generally you should avoid this type of use because an error in previous lines may cause problem with the later code. But if you use if-else then you can avoid such problems.

// user made a typo on the first line. but this code has correct syntax 
b = 10 +
a > 10 ? fun(20) : fun(0);

// same scenario using if-else will generate a compilation error which is preferred.
b = 10 +
if (a>10) {
    fun(20);
}
else {
    fun(0);
}

Thanks for providing an example of a potential code error instead of opinions about readability/properness. — 1nfiniti, Jan 17 '14 at 17:15

tkone · Answer 2 · 2014-01-17T16:51:13.923

1

JS(L|H)int is going to complain about that because it's just a expression and not a statement. In cases like this, it's "better" (argumentative) to use an if:

if(anyVariable > someValue){
    funcOne(anyVariable);
} else {
    funcTwo(anyVariable);
}

edit If terseness is a goal you can always omit the curly braces:

if(anyVariable > someValue) funcOne(anyVariable)
else funcTwo(anyVariable);

/edit

The bonus here is that your code is more readable (since it's all assignments or function calls), and if you need to extend or do more than one operation in each clause, you're set up for it.

Where the ternary operator is used well, however, is in assignments:

var thisVariable = someValue > thatValue ? someValue : thatValue;

That will pass the linter, and the statement, while terse, is still pretty readable, however, when testing against "falsey" values, I do prefer:

var thisVariable = someValue || thatValue;

If someValue is "falsey", it will set thisVariable to thatValue.

edited Jan 17 '14 at 16:51

answered Jan 17 '14 at 16:37

tkone

22,092
5
54
78

What if someValue is not falsey? As an example, let's say someValue = 10. I also don't agree with the readability. I think the ternary example I provided is very readable and more consise than an if/else for single statement situations. I do agree with the benefit of extensibility, but TBH I only really use this in single statement situations where it's not required to do more. Considering that the statement is calling functions, any excess statements that you'd need to fire within the if statement could be delegated to within the function. – 1nfiniti Jan 17 '14 at 16:46
@mikeyUX if `someValue` is not falsey, in that last example, `thisVariable` will get set to `someValue`. The boolean operators in JS are short-circuit -- once a condition has been met, the rest of the expression will not be evaluated. Since `someValue` is not falsey, it just returns and sets `thisVariable` to that. – tkone Jan 17 '14 at 16:48
@mikeyUX as for readability, that's why I put in the term argumentative. For my team and my code, we do not allow the ternary to be used as such. Remember: terseness may make creating code "easier" but it doesn't make maintaining it easier. The more explicit you are in your code, the easier it will be to determine what exactly your intent was later down the road. – tkone Jan 17 '14 at 16:50
agreed with the argumentative - so forgive me, as I am about to argue a bit :) ... In the example I've laid out, I don't think there are any issues determining the intent. Furthermore, I think the terse example you've provided in your edit is probably more problematic than the ternary statement I initially provided (see top answer here: http://stackoverflow.com/questions/359732/why-is-it-considered-a-bad-practice-to-omit-curly-braces). – 1nfiniti Jan 17 '14 at 16:55
@mikeyUX I'm not trying to argue. Your question was about pitfalls. Technically there are none. Your program runs. The pitfalls are all stylistic. If you like this better, disable the warning in JSHint: `expr: false` – tkone Jan 17 '14 at 16:57
@mikeyUX if you're looking to argue over stylistic issues this is not the forum for it. – tkone Jan 17 '14 at 16:58
This is not my intention. Take a look at every answer & comment to the question - stylistic issues are the only "answers" that are being cited. – 1nfiniti Jan 17 '14 at 17:10

score 0 · Answer 3 · answered Jan 17 '14 at 16:34

I'd avoid it, if you use it incorrectly then it'll cause errors (I've seen invalid left hand assignment amongst others). If you're using a good minifier (such as Uglify), it'll do all this for you when running your build process - which keeps your development code readable and easy.

I'd stick with using it for assignment only.

Ternary Statements in Javascript: pitfalls of no assignment?

3 Answers3