How to write a ternary operator (aka if) expression without repeating yourself
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;
}
Code should be readable, so being succinct should not mean being terse whatever the cost - for that you should repost to https://codegolf.stackexchange.com/ - 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++.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator
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 );
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.
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)
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';