Question on if/when to use Ternary Operators?
jquery - JavaScript ternary operator example with functions - Stack Overflow
How do you use the ? : (conditional) operator in JavaScript? - Stack Overflow
Ternary operator
So i am completly new to programming and learning thru codecademy.
I just got thru all the lessons about if else statements and when/how to use them but in their next lession they talk about Ternary Operator basically being a "shot handed" version of wirting an if else statement (if I am understanding that correctly) if I am understanding it correctly then my question is, is one more "professional" then the other or is it just based on what your coding or what lets say your boss is asking you to code
The other reason I ask is I want to devlope good habits now vs later down the road so using the example below is it I guess from a "real world" working senario is it better to use one over the other
For example; I know this is a very genaric and basic example but
let nightTime = true
if (nighTime) {
console.log('Nightime');
} else {
console.log('Daytime')
}vs
nightTime
? console.log('Nighttime')
: console.log('Daytime');Heh, there are some pretty exciting uses of ternary syntax in your question; I like the last one the best...
x = (1 < 2) ? true : false;
The use of ternary here is totally unnecessary - you could simply write
x = (1 < 2);
Likewise, the condition element of a ternary statement is always evaluated as a Boolean value, and therefore you can express:
(IsChecked == true) ? removeItem($this) : addItem($this);
Simply as:
(IsChecked) ? removeItem($this) : addItem($this);
In fact, I would also remove the IsChecked temporary as well which leaves you with:
($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);
As for whether this is acceptable syntax, it sure is! It's a great way to reduce four lines of code into one without impacting readability. The only word of advice I would give you is to avoid nesting multiple ternary statements on the same line (that way lies madness!)
The ternary style is generally used to save space. Semantically, they are identical. I prefer to go with the full if/then/else syntax because I don't like to sacrifice readability - I'm old-school and I prefer my braces.
The full if/then/else format is used for pretty much everything. It's especially popular if you get into larger blocks of code in each branch, you have a muti-branched if/else tree, or multiple else/ifs in a long string.
The ternary operator is common when you're assigning a value to a variable based on a simple condition or you are making multiple decisions with very brief outcomes. The example you cite actually doesn't make sense, because the expression will evaluate to one of the two values without any extra logic.
Good ideas:
this > that ? alert(this) : alert(that); //nice and short, little loss of meaning
if(expression) //longer blocks but organized and can be grasped by humans
{
//35 lines of code here
}
else if (something_else)
{
//40 more lines here
}
else if (another_one) /etc, etc
{
...
Less good:
this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.
if(this != that) //Ternary would be done by now
{
x = this;
}
else
}
x = this + 2;
}
A really basic rule of thumb - can you understand the whole thing as well or better on one line? Ternary is OK. Otherwise expand it.
This is a one-line shorthand for an if-else statement. It's called the conditional operator.1
Here is an example of code that could be shortened with the conditional operator:
var userType;
if (userIsYoungerThan18) {
userType = "Minor";
} else {
userType = "Adult";
}
if (userIsYoungerThan21) {
serveDrink("Grape Juice");
} else {
serveDrink("Wine");
}
This can be shortened with the ?: like so:
var userType = userIsYoungerThan18 ? "Minor" : "Adult";
serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");
Like all expressions, the conditional operator can also be used as a standalone statement with side-effects, though this is unusual outside of minification:
userIsYoungerThan21 ? serveGrapeJuice() : serveWine();
They can even be chained:
serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');
Be careful, though, or you will end up with convoluted code like this:
var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;
1 Often called "the ternary operator," but in fact it's just a ternary operator [an operator accepting three operands]. It's the only one JavaScript currently has, though.
I want to add some to the given answers.
In case you encounter (or want to use) a ternary in a situation like 'display a variable if it's set, else...', you can make it even shorter, without a ternary.
Instead of:
var welcomeMessage = 'Hello ' + (username ? username : 'guest');
You can use:
var welcomeMessage = 'Hello ' + (username || 'guest');
This is Javascripts equivallent of PHP's shorthand ternary operator ?:
Or even:
var welcomeMessage = 'Hello ' + (username || something || maybethis || 'guest');
It evaluates the variable, and if it's false or unset, it goes on to the next.