How do you use the conditional operator in JavaScript

Question

In simple words  what is the     conditional   quot ternary quot   operator and how can I use it

User · Answer

It s a little hard to google when all you have are symbols    The terms to use are  quot JavaScript conditional operator quot   If you see any more funny symbols in JavaScript  you should try looking up JavaScript s operators first  Mozilla Developer Center s list of operators  The one exception you re likely to encounter is the   symbol  To answer your question  conditional operators replace simple if statements  An example is best  var insurancePremium   age  gt  21   100   200   Instead of  var insurancePremium   if  age  gt  21        insurancePremium   100    else       insurancePremium   200

User · Answer

It s called the ternary operator  For some more info  here s another question I answered regarding this   How to write an IF else statement without   39 else  39

User · Answer

It s an if statement all on one line   So   var x 1   x    1    y  true    y  false   alert y     The expression to be evaluated is in the      If it matches true  execute the code after the    If it matches false  execute the code after the

User · Answer

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

User · Answer

Ternary Operator  Commonly we have conditional statements in Javascript    Example   if  true        console log 1     else       console log 0      Answer   1   but it contain two or more lines and cannot assign to a variable  Javascript have a solution for this Problem Ternary Operator  Ternary Operator can write in one line and assign to a variable   Example   var operator   true   1   0 console log operator    Answer   1   This Ternary operator is Similar in C programming language

User · Answer

z    x    y   1   2     is equivalent to  if  x    y      z   1  else     z   2    except  of course  it s shorter

User · Answer

This is probably not exactly the most elegant way to do this  But for someone who is not familiar with ternary operators  this could prove useful  My personal preference is to do 1-liner fallbacks instead of condition-blocks        var firstName    John      Undefined   var lastName    Doe         if lastName or firstName is undefined  false  null or empty   gt  fallback to empty string   lastName   lastName          firstName   firstName           var displayName             if lastName  or firstName  is undefined  false  null or empty      displayName equals  John  OR  Doe        if lastName and firstName are not empty      a space is inserted between the names   displayName     lastName     firstName    firstName   lastName   firstName         lastName         if display name is undefined  false  null or empty   gt  fallback to  Unnamed    displayName   displayName     Unnamed      console log displayName     Ternary Operator

User · Answer

x   9 y   8   unary    x --x   Binary  z   x   y   Ternary  2 gt 3   true   false  2 lt 3   true   false  2 lt 3    2 is lesser than 3     2 is greater than 3

User · Answer

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

User · Answer

The conditional  ternary  operator is the only JavaScript operator   that takes three operands  This operator is frequently used as a   shortcut for the if statement    condition   expr1   expr2       If condition is true  the operator returns the value of expr1    otherwise  it returns the value of expr2    function fact n      if  n  gt  1        return n   fact n-1       else       return 1           we can replace the above code in a single line of code as below     return  n    1    n   fact n - 1    1    console log fact 5      For more clarification please read MDN document link

User · Answer

We can use with Jquery as well as length as below example    Suppose we have GuarantorName textbox which has value and want to get firstname and lastname- it may be null  So rathar than           var gnamesplit       txtGuarantorName   val   split               var gLastName               var gFirstName               if gnamesplit length  gt  0               gLastName    gnamesplit 0                             if gnamesplit length  gt  1               gFirstName   gnamesplit 1                       We can use below code with Jquery with minimum code  x000D   x000D       x000D   x000D      var gnamesplit       txtGuarantorName   val   split       x000D      var gLastName   gnamesplit length  gt  0    gnamesplit 0        x000D      var gFirstName    gnamesplit length  gt  1    gnamesplit 1        x000D          txtLastName   val gLastName   x000D          txtFirstName   val gFirstName   x000D       x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div  gt  x000D    Guarantor Name   lt input type  text  id  txtGuarantorName  value  ASP NET Core     gt  lt br  gt  x000D     lt br  gt  x000D     lt br  gt  x000D     x000D    First Name   lt input type  text  id  txtLastName  value  ASP NET Core     gt  x000D    Last Name   lt input type  text  id  txtFirstName  value  ASP NET Core     gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Hey mate just remember js works by evaluating to either true or false  right    let s take a ternary operator     questionAnswered    Awesome      damn      First  js checks whether questionAnswered is true or false   if  true       you will get  Awesome     else       you will get  damn    Hope this helps friend

User · Answer

If you have one condition check instance function in javascript  it s easy to use ternary operator  which will only need one single line to implement  Ex       private module   string          private page boolean   false      async mounted         if this module     Main             this page   true       else      this page   false            a function like this with one condition can be written as follow   this page   this module     Main   true false    condition   if True   if False

User · Answer

It is called the ternary operator  tmp    foo  1   true   false

User · Answer

Ternary expressions are very useful in JS  especially React  Here s a simplified answer to the many good  detailed ones provided   condition   expressionIfTrue   expressionIfFalse   Think of expressionIfTrue as the OG if statement rendering true  think of expressionIfFalse as the else statement   Example   var x   1   x    1    y x   y z    this checked the value of x  the first y  value  returned if true  the second return after the colon   returned y  value  if false

User · Answer

sunday     True     sun   lt span class  label label-success  gt S lt  span gt     sun   lt span class  label label-danger  gt S lt  span gt      sun     lt span class  label       sunday      True     label-success     label-danger        gt S lt  span gt

User · Answer

It s called the  ternary  or  conditional  operator   Example     The    operator can be used as a   shortcut for an if   else statement    It is typically used as part of a   larger expression where an if   else   statement would be awkward  For   example    var now   new Date    var greeting    Good      now getHours    gt  17      evening       day          The example creates a string   containing  Good evening   if it is   after 6pm  The equivalent code using   an if   else statement would look as   follows    var now   new Date    var greeting    Good   if  now getHours    gt  17     greeting      evening    else    greeting      day      From MSDN JS documentation   Basically it s a shorthand conditional statement   Also see     Operator precedence with Javascript Ternary operator Wikipedia

User · Answer

Most of the answers are correct but I want to add little more  The ternary operator is right-associative  which means it can be chained in the following way if     else-if     else-if     else    function example         return condition1   value1            condition2   value2            condition3   value3            value4      Equivalent to   function example         if  condition1    return value1        else if  condition2    return value2        else if  condition3    return value3        else   return value4        More details is here

[javascript] How do you use the ? : (conditional) operator in JavaScript?

Examples related to javascript

Examples related to conditional-operator