First of all, a ternary expression is not a replacement for an if/else construct - it's an equivalent to an if/else construct that returns a value. That is, an if/else clause is code, a ternary expression is an expression, meaning that it returns a value.
This means several things:
- use ternary expressions only when you have a variable on the left side of the
=that is to be assigned the return value - only use ternary expressions when the returned value is to be one of two values (or use nested expressions if that is fitting)
- each part of the expression (after ? and after : ) should return a value without side effects (the expression
x = truereturns true as all expressions return the last value, but it also changes x without x having any effect on the returned value)
In short - the 'correct' use of a ternary expression is
var resultofexpression = conditionasboolean ? truepart: falsepart;
Instead of your example condition ? x=true : null ;, where you use a ternary expression to set the value of x, you can use this:
condition && (x = true);
This is still an expression and might therefore not pass validation, so an even better approach would be
void(condition && x = true);
The last one will pass validation.
But then again, if the expected value is a boolean, just use the result of the condition expression itself
var x = (condition); // var x = (foo == "bar");
UPDATE
In relation to your sample, this is probably more appropriate:
defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';
First of all, a ternary expression is not a replacement for an if/else construct - it's an equivalent to an if/else construct that returns a value. That is, an if/else clause is code, a ternary expression is an expression, meaning that it returns a value.
This means several things:
- use ternary expressions only when you have a variable on the left side of the
=that is to be assigned the return value - only use ternary expressions when the returned value is to be one of two values (or use nested expressions if that is fitting)
- each part of the expression (after ? and after : ) should return a value without side effects (the expression
x = truereturns true as all expressions return the last value, but it also changes x without x having any effect on the returned value)
In short - the 'correct' use of a ternary expression is
var resultofexpression = conditionasboolean ? truepart: falsepart;
Instead of your example condition ? x=true : null ;, where you use a ternary expression to set the value of x, you can use this:
condition && (x = true);
This is still an expression and might therefore not pass validation, so an even better approach would be
void(condition && x = true);
The last one will pass validation.
But then again, if the expected value is a boolean, just use the result of the condition expression itself
var x = (condition); // var x = (foo == "bar");
UPDATE
In relation to your sample, this is probably more appropriate:
defaults.slideshowWidth = defaults.slideshowWidth || obj.find('img').width()+'px';
No, it needs three operands. That's why they're called ternary operators.
However, for what you have as your example, you can do this:
if(condition) x = true;
Although it's safer to have braces if you need to add more than one statement in the future:
if(condition) { x = true; }
Edit: Now that you mention the actual code in which your question applies to:
if(!defaults.slideshowWidth)
{ defaults.slideshowWidth = obj.find('img').width()+'px'; }
I have scoured StackOverflow regarding this issue and the suggested solution seems to be to use the && operator instead of a ternary statement like so condition && (x = true); , however this doesn't work when I use it in my code:
let a = false b = a && 3 console.log(b)
This logs false instead of undefined which is what I expected since a is false.
Videos
Generally speaking, the conditional operator is intended to make an if statement with a value. w = x ? y : z. Thus, if you're using it for side effects, it's counter-intuitive. Valid, but counter-intuitive; and remember that you're writing code for your teammates to read.
A couple of cases, that are not assignments, where I find ternary operators useful are:
In function arguments: in my opinion
f( e1, .. cond ? em : dm, .. en);
is less error prone than
if ( cond) f( e1, .. em, .. en); else f( e1, .. dm, .. en);
When you want to call one function or another with identical arguments: again I find
(cond ? f : g)( /* long and complex argument list */);
less error prone than
if ( cond) f( /* long and complex argument list */);
else g( /* long and complex argument list */);
As I see it the key thing in each case is that the ? form has less repetition. Repetition opens up the possibility of changing one instance and forgetting to change the other.
How Can I Use Ternary Conditional Operator Without Else?
No. The conditional operator always has to "return" a value. Imagine it was possible to leave out the alternative (e.g. arr.push(num > 3 ? num)), what value would be pushed to the array?
In this specific case there is a better tool for the job: Array#filter:
const newNumbers = numbers.filter(num => num > 3)
Use && instead of ?,
const numbers = [1, 2, 3, 4, 5, 6];
const newNumbers = numbers.reduce((acc, num) => {
num > 3 && acc.push(num)
return acc;
}, []);
console.log(newNumbers);
//returns new Numbers,[4, 5, 6]