How to do this IF with ternary operators

Question

how can I do this IF with ternary operators?

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else if (user) {
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && !camera) {
    return 'img.svg';
  } else if (user.img && camera) {
    return camera;
  } else if (!user.img && camera) {
    return camera;
  }
} 

I already tried it in several ways, but none of them work for me.

Answer 1

If you don't mind using a couple if statements..

const imgSvg = 'img.svg' // Maybe use a variable for 'img.svg'?

if (img) return img
if (!user) return imgSvg
return camera || (user.img ? 'imgServer' : imgSvg)

So..

If you have img, just return it.

If you don't have img.. then the next thing to do is return 'img.svg' if there is no user present..

ie.. if (!user) return imgSvg

From there it depends on camera, and user.img..

ie.. return camera || user.img ? 'imgServer' : imgSvg

Note: this is very similar to @Nina Scholz answer.. but you have a case where:

if !user.img and camera is present, return camera

@Nina Scholz answer doesn't allow for that. Please correct me if I'm wrong.

Answer 2

Since you have return statements in your ifs, your code might need a little bit of remodelling... This is a direct equivalence from what you wrote above.

let returnValue = img != null ? img : !user ? 'img.svg' : user.img && !camera ? `imgServer` : !user.img && !camera ? 'img.svg' : user.img && camera ? camera : !user.img && camera : camera;
return returnValue;

But to be honest, I feel like this specific example could be a little bit simplifed...

As pointed out in the comments, since you have return statements, you don't need all those else if and you can compress your logic a bit

The following would be equivalent to the code in your question

if (img != null) return img;
if (!user) return 'img.svg';
if (!camera) {
  if (user.img) return `imgServer`;
return 'img.svg';
}
return camera;

And if you absolutely want that in ternary, that'd be:

let returnValue = img != null ? img : !user ? 'img.svg' : !camera ? user.img ? `imgServer` : 'img.svg' : camera;
return returnValue;

This would be a less compact and maybe not as eleguant answer than the one Nina Scholz did, but if the sequence of ifs and boolean evaluation matter to you, it might do the trick

Answer 3

Are you sure that you need a ternary here? Personally, I've always found ternaries to be difficult to grok and debug at the best of times.

---

I would start by simplifying your if statement tree. As others have said, you can simplify the else if (user) to `else. Giving you:

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && !camera) {
    return 'img.svg';
  } else if (user.img && camera) {
    return camera;
  } else if (!user.img && camera) {
    return camera;
  }
} 

Then I would tackle making the nested if statement simpler by re-ordering it:

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && camera) {
    return camera;
  } else if (user.img && camera) {
    return camera;
  }
  // Since there are four possible states allowed
  // (write out a truth table for proof), we can
  // simplify this nested if statement
  return 'img.svg';
} 

Now that everything is simplified, you can tackle creating a ternary. First, the nested if:

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  return (user.img && !camera) ? `imgServer` :
         (!user.img && camera) ? camera : 
         (user.img && camera) ? camera :
         'img.svg';
} 

And finally the outer if statement:

return (img != null) ? img :
       (!user) ? 'img.svg' :
         (user.img && !camera) ? `imgServer` :
         (!user.img && camera) ? camera : 
         (user.img && camera) ? camera :
         'img.svg';
} 

Answer 4

You could compress the statements into this without using an unradable and understandable ternary.

if (img != null) return img;            // maybe this would work, too if (img) return img;
if (!user || !user.img) return 'img.svg';
if (camera) return camera;
return `imgServer`;

An even shorter approach:

return image
    || (!user || !user.img) && 'img.svg'
    || camera
    || `imgServer`;