Question

18

Alternative to nested ternary operator in JS

rated 0 times [ 21] [ 3] / answers: 1 / hits: 78203 / 9 Years ago, sat, august 29, 2015, 12:00:00

I personally love ternary operators, and in my humble opinion, they make complicated expressions very easy to digest. Take this one:

  const word = (distance === 0) ? 'a'

    : (distance === 1 && diff > 3) ? 'b'

    : (distance === 2 && diff > 5 && key.length > 5) ? 'c'

    : 'd';

However in our project's ESLINT rules nested ternary operators are forbidden, so I have to get rid of the above.

I'm trying to find out alternatives to this approach. I really don't want to turn it into a huge if / else statement, but don't know if there's any other options.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raveno

Add To Favorites

Follow

Total Points: 453

Total Questions: 92

Total Answers: 92

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

raveno questions

1 Webpacker error related to module babel-plugin-syntax-dynamic-import

Wed, Jun 24, 20, 00:00, 4 Years ago

1 Problem with using map to populate select in React / Material UI

Sat, Feb 29, 20, 00:00, 4 Years ago

1 How to use a Global Variable in Jest

Fri, Dec 20, 19, 00:00, 5 Years ago

1 No node found for selector in headless true mode of puppeteer

Thu, Sep 26, 19, 00:00, 5 Years ago

1 How to fix Uncaught TypeError: Cannot read property 'Timestamp' of undefined?

Sat, Jun 22, 19, 00:00, 5 Years ago

View All

answered 9 Years ago virginia · Accepted Answer

Your alternatives here are basically:

That if/else you don't want to do

A switch combined with if/else

I tried to come up with a reasonable lookup map option, but it got unreasonable fairly quickly.

I'd go for #1, it's not that big:

if (res.distance == 0) {

    word = 'a';

} else if (res.distance == 1 && res.difference > 3) {

    word = 'b';

} else if (res.distance == 2 && res.difference > 5 && String(res.key).length > 5) {

    word = 'c';

} else {

    word = 'd';

}

If all the braces and vertical size bother you, without them it's almost as concise as the conditional operator version:

if (res.distance == 0) word = 'a';

else if (res.distance == 1 && res.difference > 3) word = 'b';

else if (res.distance == 2 && res.difference > 5 && String(res.key).length > 5) word = 'c';

else word = 'd';

(I'm not advocating that, I never advocate leaving off braces or putting the statement following an if on the same line, but others have different style perspectives.)

#2 is, to my mind, more clunky but that's probably more a style comment than anything else:

word = 'd';

switch (res.distance) {

    case 0:

        word = 'a';

        break;

    case 1:

        if (res.difference > 3) {

            word = 'b';

        }

        break;

    case 2:

        if (res.difference > 5 && String(res.key).length > 5) {

            word = 'c';

        }

        break;

}

And finally, and I am not advocating this, you can take advantage of the fact that JavaScript's switch is unusual in the B-syntax language family: The case statements can be expressions, and are matched against the switch value in source code order:

switch (true) {

    case res.distance == 0:

        word = 'a';

        break;

    case res.distance == 1 && res.difference > 3:

        word = 'b';

        break;

    case res.distance == 2 && res.difference > 5 && String(res.key).length > 5:

        word = 'c';

        break;

    default:

        word = 'd';

        break;

}

How ugly is that? :-)