How to write a ternary operator (aka if) expression without repeating yourself

How to write a ternary operator (aka if) expression without repeating yourself

For example, something like this:
var value = someArray.indexOf(3) !== -1 ? someArray.indexOf(3) : 0

Is there a better way to write that? Again, I am not seeking an answer to the exact question above, just an example of when you might have repeated operands in ternary operator expressions…


Solution 1:

Personally I find the best way to do this is still the good old if statement:

var value = someArray.indexOf(3);
if (value === -1) {
  value = 0;

Solution 2:

Code should be readable, so being succinct should not mean being terse whatever the cost – for that you should repost to – so instead I would recommend using a second local variable named index to maximize reading comprehensibility (with minimal runtime cost too, I note):

var index = someArray.indexOf( 3 );
var value = index == -1 ? 0 : index;

But if you really want to cut this expression down, because you’re a cruel sadist to your coworkers or project collaborators, then here are 4 approaches you could use:

1: Temporary variable in a var statement

You can use the var statement’s ability to define (and assign) a second temporary variable index when separated with commas:

var index = someArray.indexOf(3), value = index !== -1 ? index: 0;

2: Self-executing anonymous function

Another option is an self-executing anonymous function:

// Traditional syntax:
var value = function( x ) { return x !== -1 ? x : 0 }( someArray.indexOf(3) );

// ES6 syntax:
var value = ( x => x !== -1 ? x : 0 )( someArray.indexOf(3) );

3: Comma operator

There is also the infamous “comma operator” which JavaScript supports, which is also present in C and C++.

You can use the comma operator when you want to include multiple expressions in a location that requires a single expression.

You can use it to introduce side-effects, in this case by reassigning to value:

var value = ( value = someArray.indexOf(3), value !== -1 ? value : 0 );

This works because var value is interpreted first (as it’s a statement), and then the left-most, inner-most value assignment, and then the right-hand of the comma operator, and then the ternary operator – all legal JavaScript.

4: Re-assign in a subexpression

Commentator @IllusiveBrian pointed out that the use of the comma-operator (in the previous example) is unneeded if the assignment to value is used as a parenthesized subexpression:

var value = ( ( value = someArray.indexOf(3) ) !== -1 ? value : 0 );

Note that the use of negatives in logical expressions can be harder for humans to follow – so all of the above examples can be simplified for reading by changing idx !== -1 ? x : y to idx == -1 ? y : x:

var value = ( ( value = someArray.indexOf(3) ) == -1 ? 0 : value );

Solution 3:

For numbers

You can use the Math.max() function.

var value = Math.max( someArray.indexOf('y'), 0 );

It will keep the boundaries of the result from 0 until the first result greater than 0 if that’s the case. And if the result from indexOf is -1 it will return 0 as is greater than -1.

For booleans and boolean-y values

For JS there is no general rule AFAIK specially because how falsy values are evaluated.

But if something can help you most of the time is the or operator (||):

// Instead of
var variable = this_one === true ? this_one : or_this_one;
// you can use
var variable = this_one || or_this_one;

You have to be very careful with this, because in your first example, indexOf can return 0 and if you evaluate 0 || -1 it will return -1 because 0 is a falsy value.

Solution 4:

Not really, just use another variable.

Your example generalizes to something like this.

var x = predicate(f()) ? f() : default;

You’re testing a computed value, then assigning that value to a variable if it passes some predicate. The way to avoid re-calculating the computed value is obvious: use a variable to store the result.

var computed = f();
var x = predicate(computed) ? computed : default;

I get what you mean – it seems like there ought to be some way to do this that looks a little cleaner. But I think that’s the best way (idiomatically) to do this. If you were repeating this pattern a lot in your code for some reason, you might write a little helper function:

var setif = (value, predicate, default) => predicate(value) ? value : default;
var x = setif(someArray.indexOf(3), x => x !== -1, 0)

Solution 5:

EDIT: Here it is, the proposal for Nullary-coalescing now in JavaScript!

Use ||

const result = a ? a : 'fallback value';

is equivalent to

const result = a || 'fallback value';

If casting a to Boolean returns false, result will be assigned 'fallback value', otherwise the value of a.

Be aware of the edge case a === 0, which casts to false and result will (incorrectly) take 'fallback value' . Use tricks like this at your own risk.

PS. Languages such as Swift have nil-coalescing operator (??), which serves similar purpose. For instance, in Swift you would write result = a ?? "fallback value" which is pretty close to JavaScript’s const result = a || 'fallback value';

Solution 6:

Use an extract variable refactoring:

var index = someArray.indexOf(3);
var value = index !== -1 ? index : 0

It is even better with const instead of var. You could also do an additional extraction:

const index = someArray.indexOf(3);
const condition = index !== -1;
const value = condition ? index : 0;

In practice, use more meaningful names than index, condition, and value.

const threesIndex = someArray.indexOf(3);
const threeFound = threesIndex !== -1;
const threesIndexOrZero = threeFound ? threesIndex : 0;