JavaScript 'if' alternative

Question

What does this bit of code represent? I know it's some kind of if alternative syntax...

pattern.Gotoccurance.score != null ? pattern.Gotoccurance.score : '0'

What's the need for this sort of coding? Is this more efficient or just a shortened version with the same efficiency?

Answer 1

It is the conditional operator, and it is equivalent to something like this:

if (pattern.Gotoccurance.score != null) {
  pattern.Gotoccurance.score;
} else {
  '0';
}

But I think that an assignment statement is missing in the code you posted, like this:

var score = pattern.Gotoccurance.score !=null ? pattern.Gotoccurance.score : '0';

The score variable will be assigned if pattern.Gotoccurance.score is not null:

var score;
if (pattern.Gotoccurance.score != null) {
  score = pattern.Gotoccurance.score;
} else {
  score = '0';
}

A common pattern to do this kind of 'default value' assignments in JavaScript is to use the logical OR operator (||) :

var score = pattern.Gotoccurance.score ||  '0';

The value of pattern.Gotoccurance.score will be assigned to the score variable only if that value is not falsy (falsy values are false, null, undefined, 0, zero-length string or NaN).

Otherwise, if it's falsy '0' will be assigned.

The performance will be equivalent, and you should focus on readability. I try to use the ternary operator on expressions that are very simple, and you can also improve the formatting, splitting it up in two lines to make it more readable:

var status = (age >= 18) ? "adult"
                         : "minor";

Related question:

• To ternary or not to ternary?

Answer 2

This is a ternary operator, a shorthanded way to do if statements.

If re-written, it would look like this:

if (pattern.Gotoccurance.score != null) {
   return pattern.Gotoccurance.score;
} else {
   return '0';
}

Answer 3

It's called the ternary operator.

Answer 4

As to the need for this sort of coding:

You can sometimes use the ternary operator to reduce complexity:

For example, I have a web page which needed to verify that at least two out of three specific text fields had values entered. The if/else logic looked pretty ugly, but the ternary operator made it a one-liner to determine how many fields were filled in:

var numberFilledInFields = ( (firstName.length > 0 ? 1 : 0) +
                     (lastName.length > 0 ? 1 : 0) +
                     (zipCode.length > 0 ? 1 : 0) );

if (numberFilledInFields < 2)
{
    validation = false;
    return;
}

This solution appears quite elegant and easy to read than some alternatives.

Answer 5

It is the ternary operator/conditional operator.

In mathematics, a ternary operation is an n-ary operation with n = 3. A ternary operation on a set A takes any given three elements of A and combines them to form a single element of A.

It is a short hand form of if..else.

E.g., to want to find out if a number is even or not.

Using the if..else approach

function CheckEvenOdd()
{
    var number = 2;
    if(number % 2 == 0)
        alert("even");
    else
        alert("odd");
}

Using ternary

function CheckEvenOdd()
{
    var number = 2;
    alert((number %2 == 0) ? "even" : "odd");
}

Using switch

One more variant is switch:

function CheckEvenOdd()
{
    var number = 2;
    switch(number % 2)
    {
        case 0:
            alert("even");
            break;
        default:
            alert("odd");
            break;
    }
}

Now, if you have a simple if..else condition to perform like the one described, you can go ahead with ternary.

But if the conditional checking becomes complex, go either with if..else or switch as readability will be lost in ternary.

For example, it is easy to get the minimum or maximum of two numbers using a ternary operator, but it becomes clumsy to find the largest and second largest among three or more numbers and is not even recommended. It is better to use if..else instead.