JavaScript if alternative [duplicate]

Question

This question already has an answer here:

• Question mark and colon in JavaScript 6 answers

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'

Update:

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's called the ternary operator.

Answer 2

It is 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. want to find out if a number is even or not

//Using 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");
}

One more variant is switch

//using 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

e.g. it is easy to perform minimum or maximum of two numbers using a ternary operator but becomes clumsy to find the largest & second largest among 3 or more numbers and is not even recommmended. It is better to use if..else instead

Answer 3

Responding to the question update "Why 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 4

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 5

It is the conditional operator, 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.

Update: The performance will be equivalent, 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?