JavaScript ternary operator example with functions

Question

I am using jQuery 1 7 1  I am just starting to use the JavaScript ternary operator to replace simple if else statements  I have done so successfully in several places   I was surprised when I successfully made something else work when I thought for sure it wouldn t  but I tried anyway   Here s the original statement   function updateItem          this     this       var IsChecked    this hasClass  IsChecked        if  IsChecked    true           removeItem  this         else           addItem  this             Here s the same function using the ternary operator   function updateItem          this     this       var IsChecked    this hasClass  IsChecked         IsChecked    true    removeItem  this    addItem  this       I was surprised because all of the examples I saw being used were merely setting variables like this   x    1  lt  2    true   false    My question is whether this is  normal  use and will it work in most versions of JavaScript  Where will it fail   Are there other less obvious uses for it   UPDATE -- Thanks for the  real world  advice     I am using this as my function   function updateItem          this     this        this hasClass  IsChecked     removeItem  this    addItem  this

User · Answer

There is nothing particularly tricky about the example you posted.

In a ternary operator, the first argument (the conditional) is evaluated and if the result is true, the second argument is evaluated and returned, otherwise, the third is evaluated and returned. Each of those arguments can be any valid code block, including function calls.

Think of it this way:

var x = (1 < 2) ? true : false;

Could also be written as:

var x = (1 < 2) ? getTrueValue() : getFalseValue();

This is perfectly valid, and those functions can contain any arbitrary code, whether it is related to returning a value or not. Additionally, the results of the ternary operation don't have to be assigned to anything, just as function results do not have to be assigned to anything:

(1 < 2) ? getTrueValue() : getFalseValue();

Now simply replace those with any arbitrary functions, and you are left with something like your example:

(1 < 2) ? removeItem($this) : addItem($this);

Now your last example really doesn't need a ternary at all, as it can be written like this:

x = (1 < 2);  // x will be set to "true"

User · Answer

If you re going to nest ternary operators  I believe you d want to do something like this      var audience    countrycode     eu      audienceEU                       countrycode     jp      audienceJP                       countrycode     cn      audienceCN                       audienceUS     It s a lot more efficient to write read than   var audience    audienceUS   if countrycode     eu       audience    audienceEU     else if countrycode     jp       audience    audienceJP     else if countrycode     cn       audience    audienceCN       As with all good programming  whitespace makes everything nice for people who have to read your code after you re done with the project

User · Answer

I would also like to add something from me    Other possible syntax to call functions with the ternary operator  would be    condition   fn1   fn2       It can be handy if you have to pass the same list of parameters to both functions  so you have to write them only once    condition   fn1   fn2  arg1  arg2  arg3  arg4  arg5     You can use the ternary operator even with member function names  which I personally like very much to save space       some-element   showThisElement    addClass     removeClass    visible      or       some-element    showThisElement    add     remove      Class    visible      Another example   var addToEnd   true    or false var list    1 2 3 4   list addToEnd    push     unshift   5

User · Answer

I know question is already answered   But let me add one point here  This is not only case of true or false  See below   var val  Do    Var c   val     Do     val     Done               7             0   Here if val is Do or Done then c will be 7 else it will be zero  In this case c will be 7   This is actually another perspective of this operator

User · Answer

Heh  there are some pretty exciting uses of ternary syntax in your question  I like the last one the best    x    1  lt  2    true   false   The use of ternary here is totally unnecessary - you could simply write x    1  lt  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  quot IsChecked quot      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

User · Answer

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  gt  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  gt  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

[javascript] JavaScript ternary operator example with functions

Examples related to javascript

Examples related to jquery