How should I interpret this ternary operator?

Question

const lerpFactor = {
    toggle: rightSide ? diff < 0 ? 0.15 : 0.1 : diff < 0 ? 0.1 : 0.15,
    title: rightSide ? diff < 0 ? 0.1 : 0.15 : diff < 0 ? 0.15 : 0.1
};

How should I format this so that a beginner, like me, can understand?

Answer 1

Start with some proper indentation:

const lerpFactor = {
    toggle: rightSide
      ? diff < 0
          ? 0.15
          : 0.1
      : diff < 0
          ? 0.1
          : 0.15,
    title: rightSide
      ? diff < 0
          ? 0.1
          : 0.15
      : diff < 0
          ? 0.15
          : 0.1
};

Of course this code is still a mess that's hard to understand, beginner or not. It's meaningless (of course, that's mostly because pseudocode) and has lots of duplication. So introduce appropriately named functions that you can call to reduce both complexity and duplication, and throw in some boolean simplification:

function getFactor(diff, invert) {
    return invert !== (diff < 0)
      ? 0.15
      : 0.1;
}
const lerpFactor = {
    toggle: getFactor(diff, !rightSide),
    title: getFactor(diff, rightSide),
};

Answer 2

The conditions are the same for both toggle and title, so you can condense the code into a single if/else chain for both:

let toggle;
let title;
if (rightSide) {
  if (diff < 0) {
    toggle = 0.15;
    title = 0.1;
  } else {
    toggle = 0.1;
    title = 0.15;
  }
} else {
  if (diff < 0) {
    toggle = 0.1;
    title = 0.15;
  } else {
    toggle = 0.15;
    title = 0.1;
  }
}

const lerpFactor = { toggle, title };

Another option would be to assign title afterwards, by subtracting toggle from 0.25:

let toggle;
if (rightSide) {
  if (diff < 0) {
    toggle = 0.15;
  } else {
    toggle = 0.1;
  }
} else {
  if (diff < 0) {
    toggle = 0.1;
  } else {
    toggle = 0.15;
  }
}
const title = 0.25 - toggle;
const lerpFactor = { toggle, title };

You could also use a single if/else if you wanted, by putting both conditions for toggle = 0.15 into the if:

let toggle;
if ((rightSide && diff < 0) || (!rightSide && diff >= 0)) {
  toggle = 0.15;
} else {
  toggle = 0.1;
}
const title = 0.25 - toggle;
const lerpFactor = { toggle, title };