replace if else to switch case

Question

How can I replace these conditions from if-else to switch case:

  const getClassName = (flow, side, type) => {
    if (flow === 'Lateral' && side === 'right' && type === 'type 1') {
      return classes.LateralRightFirstType;
    } else if (flow === 'Lateral' && side === 'left' && type === 'type 1') {
      return classes.LateralLeftFirstType;
    } else if (flow === 'Lateral' && side === 'right' && type === 'type 2') {
      return classes.LateralRightSecondType;
    } else if (flow === 'Lateral' && side === 'left' && type === 'type 2') {
      return classes.LateralLeftSecondType;
    }
  };

What's wrong with `if..else` and why do you think a `switch` would be better? — deceze, Aug 16 '21 at 08:42
@deceze, the flow will grow. I thought it would be better to make a switch-case — IncognitoUser, Aug 16 '21 at 09:44
That would still require you to add one line per case, which doesn't fundamentally improve anything. There have been some alternative suggestions how to approach it below, including the comments to the answers… — deceze, Aug 16 '21 at 09:49

score 0 · Answer 1 · answered Aug 16 '21 at 08:51

0

The best solution will be to create a dict and get the value. It is easier to read and maintain

To get valur for

getClassNameWithSwitch("Lateral", "left", "type 1");

you just have to do

function getClassNameWithSwitch(flow, side, type) {
  const dict = {
    Lateral: {
      right: {
        "type 1": classes.LateralRightFirstType,
        "type 2": classes.LateralRightSecondType,
      },
      left: {
        "type 1": classes.LateralLeftFirstType,
        "type 2": classes.LateralLeftSecondType,
      },
    },
  };

 return dict[flow][side][type];
}

answered Aug 16 '21 at 08:51

DecPK

24,537
6
26
42

Indeed this solution doesn't replace from `if-else` to `switch`. But we all know that that solution will either be hard to implement or very hard to maintain. This solution is easy to read and maintain. – DecPK Aug 16 '21 at 08:56
@bravo, the answer to the question "How do I make my code harder to understand" isn't to write code that's harder to understand. The answer is "Perhaps your code is ok". – Andy Aug 16 '21 at 09:01

score -1 · Answer 2 · answered Aug 16 '21 at 08:48

-1

Since switch requires a single comparable value to switch on, this would be the only really sensible way to apply a switch here:

switch (`${flow}|${side}|${type}`) {
    case 'Lateral|right|type 1':
        return ...;
    case '...':
        ...
}

But if you're going that way, an object would make even more sense:

const choices = {
    'Lateral|right|type 1': classes.LateralRightFirstType,
    ...
}

return choices[`${flow}|${side}|${type}`];

Or:

const choices = {
    Lateral: {
        right: {
            'type 1': classes.LateralRightFirstType
            ...
        }
    }
}

return choices[flow][side][type];

answered Aug 16 '21 at 08:48

deceze

510,633
85
743
889

In this case switch-case is totally pointless, you can directly generate class from it, instead of doing such pseudo class generating. Your entire code might be replaced with: `const className = ${flow}-${side}-${type}` – ulou Aug 16 '21 at 09:43
1

`'type 1'` doesn't translate to `FirstType` that magically. Depending on where those values come from, this form of normalisation may be necessary. But yes, if it could be done this directly, that'd be even better. My latter two approaches somewhat hint in this direction, but only OP can make that realisation. – deceze Aug 16 '21 at 09:46

replace if else to switch case

2 Answers2