JS Nested Ternary with Multiple conditions

Question

Essentially I have the following issue:

if condition A & B are true ->. do thing A
if only condition A is true -> do thing B 
else -> do thing C

I tried this :

const myThing = conditionA ? conditionB ? thingA :
conditionA ? thingB : thingC;

It doesn't like the syntax but I am not sure what is wrong with it.

Answer 1

    const myThing = (conditionA && conditionB) ? thingA : (conditionA) ? thingB : thingC;
       

the same as:

if(conditionA && conditionB){
   thingA
}
else if(conditionA){
   thingB
} else {
   thingC
}

Answer 2

You've already written out the logic with if/else, so why not do that in an IIFE? It'll be more readable than using the conditional operator:

const myThing = (() => {
  if (conditionA && conditionB) {
    return thingA;
  } else if (conditionA) {
    return thingB;
  } else {
  return thingC;
  }
})();

You could also put it into a standalone function:

const getThing = (conditionA, conditionB, conditionC) => {
  if (conditionA && conditionB) {
    return thingA;
  } else if (conditionA) {
    return thingB;
  } else {
  return thingC;
  }
};
const myThing = getThing(conditionA, conditionB, conditionC);

Rather than repeating the conditionA test, you could test for its negation initially to make it a bit simpler:

const getThing = (conditionA, conditionB, conditionC) => {
  if (!conditionA) {
    return thingC;
  } else if (conditionB) {
    return thingB;
  } else {
    return thingA;
  }
};

Answer 3

Try using :

const myThing = conditionA?(conditionB?thingA:thingB):thingC;

Hope it helps.

The issue with your code is that you ternary operation require 2 expressions one if the condition is true and other if the condition is false But in your code false condition is not mentioned for given:

conditionA ? thingB 

part of the code.

Answer 4

What you actually meant to write there seems to be

const myThing = conditionA ? conditionB ? thingA : thingB : thingC;

However I do not recommend writing this as it's a lot harder to read and write as you already experienced. I'm adding this just as an explanation of how conditional operators work and hopefully to demonstrate that you shouldn't be using them for anything remotely complex. I find very limited application for the conditional in general and wouldn't miss it if it was never used. Use if/else instead.

For clarity, that expression resolves like this:

const myThing = conditionA ? (conditionB ? thingA : thingB) : thingC;

• if conditionA is true - evaluate the second conditional operator
  • if conditionB is true - return thingA
  • if conditionB is false - return thingB
• if conditionA is false - return thingC

This plays on boolean logic combination where

if (A) {
  if (B) {}
}

is equivalent to combining the two conditions via AND

if (A && B) ()

However, nesting the expressions makes it a lot harder to understand what is happening because you need to mentally map the entire expression in order to understand it. Compare these two

const x = A ? B ? C ? "one" : "two" : "three" : "four";

and

if (A && B && C) return "one";
if (A && B) return "two";
if (A) return "three";

return "four"

With the latter you need to only understand one expression at a time to find out what's being returned, with the former you need all of them.