Validating statement hard to read-CodePudding

I need to understand what this statement means in terms of sintaxis/structure:

defaultValue: (closureData != undefined) ? (closureColl[i]) ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea] : (areaFixedValue) ? [areaFixedValue] : (areaDefaultValue) ? [areaDefaultValue] : [] : []

I´m used to following sintaxis (condition) ? 'if true' : 'if false'

What does two "?" in a row mean?

CodePudding user response：

They are nested ternary conditional operators. Nesting ternaries in that way is generally considered very bad practice, for the very reason you are running into which is that they become extremely difficult to understand. You can improve readability somewhat with proper indentation and parenthesis use, but that line does not even have that.

Consider if you had only one ternary:

const foo = isBarTrue ? trueValue : falseValue;

But then consider if trueValue were itself, a ternary expression, since you can nest expressions pretty much arbitrarily:

const foo = isBarTrue ? (isBazTrue ? truestValue : trueValue) : falseValue;

If you removed the parenthesis, it would be even more confusing to the point of unreadability:

const foo = isBarTrue ? isBazTrue ? truestValue : trueValue : falseValue;

One convention to help with readability is to indent ternaries like so (there are some handy eslint and prettier plugins that will automatically do this for you which is nice). Basically each ? causes one new level of nesting to form, indicated by an indented line, while : symbols "close" that level of nesting and moving the next line out to the level of indentation of the last unmatched ?. It's a little confusing at first, but here it is in action:

const foo = isBarTrue
  ? isBazTrue
    ? truestValue
    : trueValue
  : falseValue;

Your given expression is even worse than my example, with what looks like four nested ternary conditional operators (you can just count up the number of ?s) which is just awful. I'll come back to edit this post shortly to see if I can help you untangle it.

Edit: to untangle this, one method is to refactor and pull out each individual ternary that has the form "a ? b : c" without any weird doubles like "x : y : z". Try to pull out ternaries that seem to make sense on their own once pulled out - sometimes its helpful to start at each "end" of the expression and alternate pulling out individual expressions. Also, re-writing it with the indentation style above can be very helpful.

If we start with this:

const defaultValue = (closureData != undefined) ? (closureColl[i]) ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea] : (areaFixedValue) ? [areaFixedValue] : (areaDefaultValue) ? [areaDefaultValue] : [] : [];

Try rewriting it with the indentation style:

const defaultValue = (closureData != undefined)
  ? (closureColl[i])
    ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea]
    : (areaFixedValue)
      ? [areaFixedValue]
      : (areaDefaultValue)
        ? [areaDefaultValue]
        : []
  : [];

Now we can rewrite it as such, pulling out the last "full" ternary which kind of makes sense on its own, (areaDefaultValue) ? [areaDefaultValue] : []. Remember to replace the expression in the original ternary with the new equivalent value:

const conditionalAreaDefaultValue = (areaDefaultValue)
 ? [areaDefaultValue]
 : [];

const defaultValue = (closureData != undefined)
  ? (closureColl[i])
    ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea]
    : (areaFixedValue)
      ? [areaFixedValue]
      : conditionalAreaDefaultValue
  : [];

Then, pull out the first "full" ternary, which also sorta makes sense on its own, (closureColl[i]) ? [closureColl[i].collaboratorGroup "--" closureColl[i].collaboratorArea] : (areaFixedValue):

const conditionalAreaDefaultValue = (areaDefaultValue)
  ? [areaDefaultValue]
  : [];

const conditionalCollValue = (closureColl[i])
  ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea]
  : (areaFixedValue);

const defaultValue = (closureData != undefined)
  ? conditionalCollValue
    ? [areaFixedValue]
    : conditionalAreaDefaultValue
  : [];

From here the remaining nested ternaries are a bit easier to understand, and it looks like the middle part is doing a lot of work to determine the "final" value of this expression. Let's pull that part out, conditionalCollValue ? [areaFixedValue] : conditionalAreaDefaultValue:

const conditionalAreaDefaultValue = (areaDefaultValue)
  ? [areaDefaultValue]
  : [];

const conditionalCollValue = (closureColl[i])
  ? [closureColl[i].collaboratorGroup   "--"   closureColl[i].collaboratorArea]
  : (areaFixedValue);

const conditionalFinalValue = conditionalCollValue
  ? [areaFixedValue]
  : conditionalAreaDefaultValue;

const defaultValue = (closureData != undefined)
  ? conditionalFinalValue
  : [];

There is even more refactoring you could do here, especially with naming or converting things to if statements, but I will leave that to you. Hopefully this exercise sheds some light on what the heck is going on with that expression in the first place.