I wrote code like this:

query = (type) ? (parent) ? { parent: parent } : { type: type } : {}

I didn't know that nested ternary should be avoided. But what would be a short way to write that correctly?

This seems not to be very short - and I don't know if that is correct:

if (type && parent)
    query = { parent: parent };
else if (type && !parent)
    query = { type: type };
else
    query = {};

I wrote code like this:

query = (type) ? (parent) ? { parent: parent } : { type: type } : {}

I didn't know that nested ternary should be avoided. But what would be a short way to write that correctly?

This seems not to be very short - and I don't know if that is correct:

if (type && parent)
    query = { parent: parent };
else if (type && !parent)
    query = { type: type };
else
    query = {};

• javascript
• ternary-operator

• 2 Ok, why is nested ternary not so useful? – Ayan Commented Jul 16, 2016 at 10:13
• Why does eslint mark it as error? – user3142695 Commented Jul 16, 2016 at 10:18
• "I didn't know that nested ternary should be avoided." - Who said so? – Bergi Commented Jul 16, 2016 at 10:18
• 3 It is not easily readable. – str Commented Jul 16, 2016 at 10:24

3 Answers 3

Nested ternary operators are often not very readable. Your example is relatively easy. However, when nesting the operators differently, you have to know the execution order to properly understand it. For example (borrowed from here):

a == b ? a : b ? c : d 

Is it obvious to you how this will be executed? Is it

(a == b ? a : b) ? c : d 

or

a == b ? a : (b ? c : d) 

? In JavaScript, the ternary operator is right associative which means it evaluates to the latter. In some programming languages, the ternary operator is not right but instead left associative. This shows that nesting ternary operators can be confusing and, thus, should either be avoided or explicitly done by adding parentheses.

If you want a oneliner to your specific question, you can use this:

var query = (type && parent && {parent:parent}) || (type && {type:type}) || {};

However, the following is much more readable in my opinion:

var query = {};
if (type) {
    query = parent ? { parent: parent } : { type: type };
}

How about this:

var query = {};

if (type){
    if(parent){
        query = {parent: parent};
    }else{
        query = {type: type};
    }
}

Two expressions for First conditional operator (?) will be the result of (parent) ? { parent: parent } : { type: type } and last expression {}.

The way it works is

var a  = 1, b = 2;
console.log( a == 1 ? b == 2 ? 3 : 2 : 1 );//outputs 3 
console.log( a == 2 ? b == 2 ? 3 : 2 : 1 );//outputs 1 
console.log( a == 1 ? b == 1 ? 3 : 2 : 1 );//outputs 2 

So, the a==1 is evaluated first and then it goes to second one b==2 .

So, you need to do

if ( type )
{
   if (parent)
   {
     query = { parent: parent };
   }
   else
   {
     query = { type: type };
   }
}
else
{
     query = {};
}