Add no-nested-ternary rule

[kristijanbambir]

We often complain that a ternary expression within another ternary expression is hard to read and understand. I propose to add the no-nested-ternary as an error to the base JS config. Thoughts?

[mislavmiocevic]

allAgree ? addRule() : moreAgree ? addRule() : waitOnLongerDiscussionAndAgree() ? addRule() : dontAddRule()

My vote: add rule
Why: I needed to check this multiple times before posting to see if I wrote it correct, imagine with longer variables and few multilines. It is not readable.
#noTernaryTrain

[kristian240]

My vote: add a rule!

Reason: Hard to read. E.g., if we use nested ternary for return statements it is easier to read a few lines rather than one long.

function foo() {
  return conditionA ? 1 : conditionB ? 2 : 3;

// vs

function bar() {
  if (conditionA) {
    return 1;
  }

  if (conditionB) {
     return 2;
  }

  return 3;
}

// i wouldn't mind something like this either

function bar() {
  if (conditionA) return 1

  if (conditionB) return 2;

  return 3;
}

Same goes for React components:

function Component() {
  const { loading, data, error } = fetchData();
  
  return (
    <div>
      {loading ? 'loading' : error ? 'error' : 'data'}
    </div>
  );

VS

function Component() {
  const { loading, data, error } = fetchData();
  
  if (error) return 'error';

  if (loading) return 'loading'; 

  return <div>data</div>;

or

function Component() {
  const { loading, data, error } = fetchData();
  
  return (
    <div>
      {loading ? 'loading' : null}
      {error ? 'error' : null}
      {data ? 'data' : null}
    </div>
  );

#noTernaryTrain

[isBatak]

Yes please!