0

I am trying to write multiple conditions with ternary expressions in JXS.

But not sure if it's correct.

const applyNowUrl = isSmallerThan.medium ? applyNowMobileURL : isEqualOrLargerThan ? applyNowDesktopURL : applyNowTabletURL

The "applyNowUrl" const should have 3 different URLs based on screen size.

Junius L
  • 15,881
  • 6
  • 52
  • 96
Bryce77
  • 315
  • 4
  • 15
  • Why aren't you sure? – Dave Newton Jun 10 '19 at 15:38
  • Because getting this error "do not nest ternary expressions" – Bryce77 Jun 10 '19 at 15:39
  • That's a linting "error", not a coding error. You're getting that linting error because nesting ternaries makes code much harder to reason about, compared to things like a function call with `if`s or a `switch`. – Dave Newton Jun 10 '19 at 15:40
  • Nested ternary expressions can be difficult to read so I suggest using `if .. else if .. else `. If you really insist on using a ternary expression, I suggest at least using parenthesis `var x = conditiona ? a : (conditionb ? b : c)` to be sure about precedence and make it a bit mor readable. Especially if the conditions are not simple bools. – derpirscher Jun 10 '19 at 15:43
  • Possible duplicate of [Alternative to nested ternary operator in JS](https://stackoverflow.com/questions/32289340/alternative-to-nested-ternary-operator-in-js) – Mosè Raguzzini Jun 10 '19 at 15:50

2 Answers2

3

It is correct to have multiple ternary conditions although it makes it difficult to read.

For the sake of clearness, sometimes it's better to create an external function for this:

const applyNowUrl = myFucntion(isSmallerThan, isEqualOrLargerThan);

const myFunction = (isSmallerThan, isEqualOrLargerThan) => {
  if (isSmallerThan.medium) return applyNowMobileURL;
  if (isEqualOrLargerThan) return applyNowDesktopURL;
  return applyNowTabletURL;
}
Jose A. Ayllón
  • 866
  • 6
  • 19
  • IIFE's are also great for this. – Berouminum Jun 10 '19 at 15:42
  • @Berouminum How so? I.e., what would make an IIFE better, or more readable, than a simple `if`, or a regular function if it's used in multiple places? To me an IIFE makes zero sense here. – Dave Newton Jun 10 '19 at 15:49
  • @DaveNewton If you need this in multiple places then an IIFE is obviously useless. However there is no need to declare a named function as he did above if you call it immediately and only once anyway. – Berouminum Jun 10 '19 at 16:03
  • @Berouminum Sure. Given a single use, then, I'm asking why an IIFE over an `if` or a function. There are definitely reasons to break it out into a function, though, like easier testing and extensibility, and easier IoC. – Dave Newton Jun 10 '19 at 16:06
  • Let me try this Jose. – Bryce77 Jun 10 '19 at 16:11
  • @DaveNewton Using an IIFE has the advantage of being able to use const, which is always great for readability. I personally find something like this: `const applyNowUrl = (() => { if(isSmallerThan.medium) { return applyNowMobileURL; } if(isEqualOrLargerThan) { return applyNowDesktopURL; } return applyNowTabletURL; })();` Easier to read than having some sort of chained if condition. '_like easier testing_': This might be true in some cases, but I personally don't think there is much testing to do when it comes to simple if checking. – Berouminum Jun 10 '19 at 16:21
  • 1
    Seems Jose’s answer is better way to achieve this. Thanks Joes. – Bryce77 Jun 10 '19 at 17:10
0

You can have it like this:

const applyNowUrl =
    isSmallerThan.medium ? applyNowMobileURL
    : isEqualOrLargerThan ? applyNowDesktopURL
    : applyNowTabletURL

You can also use if else recursively

MohamadKh75
  • 2,582
  • 5
  • 28
  • 54