How do you read this JavaScript code? (var1 ? var2:var3)

Question

I've seen this format used in JavaScript code, but can't find a good source for the meaning.

Edit for a follow-up:

Thanks for all the quick answers! I figured it was something like that. Now, for bonus points:

can you use (var1 ? var2)

to do the same thing as

    if (var1) {
        var2
    }

?

Answer 1

It's known as a ternary (because it has three operands) conditional (because it's an if/else/then) operator.

It is evaluated to a value, so you would usually use it to assign a value, such as:

var result = condition ? value1 : value2;

Which is equivalent to:

var result;
if (condition == true) {
  result = value1;
} else {
  result = value2;
}

An example:

var message = "Length is " + len + " " + (len==1 ? "foot" : "feet");

Note ?: is the full operator. It's not a ? and : operator, so ? by itself is meaningless in Javascript.

Answer 2

Its a conditional operator.

It is

if var1 then var2 else var3

Read more here

Conditional Operator

The conditional operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

Answer 3

if(var1) {
    var2;
else {
    var3;
}

Answer 4

The expression var1 ? var2 : var3 returns the value of var2 if var1 is considered to have a value equivalent to true else it returns teh value of var3.

Note this is not quite the same as:-

if (var1)
   varX = var2
else
   varX = var3

Since the above construct can not itself appear as part of a larger expression.

In ternery expression, as ? : is known, one should avoid allowing the component expressions to have side effects other than perhaps the side-effects of ++ or -- operators. For example this isn't a good idea:-

varX = var1 ? doSomethingSignificant() : doSomethingElseSignificant();

In this case it would be better to use the if else construct. On the hand:-

varX = var1 ? calcSomething(var2) : someOtherCalc(var2);

this is acceptable assuming the called functions don't themselves modify the program state significantly.

Edit:

I think I need to re-enforce this point. Do not use the ternary operator as means to short cut on if statements. The two have different purposes. If your code is full of ? : that should be if else it will be difficult to read. We expect logical flow to appear in if statements. We expect ? : when there is a simple logical component to an expression. Note expressions do not modify things only the results of them when assigned should modify things.

Answer 5

As an addendum for the first question, you can alternatively use

  var result = (condition) && var1 || var2;

and obtain the same result

For the second question, in C the following works too :

  (condition) && someinstruction;

but that does not seem to work in javascript (at least with my version of firefox).

Answer 6

This seems to be sort of a ternary operation. Short form of an if else operation, so to say. check here for details...