DEV Community

JS Refactoring Combo: Replace Nested If-Else with Guards

Lars Grammel on September 29, 2021

Nested if-else statements can make it unnecessarily complicated to reason about the different executions paths and results of a function. A loss of...

Read full post

nemasmisal • Sep 30 '21

const cases = {
isDead: deadAmount(),
isSeparated: separatedAmount(),
isRetired: retiredAmount()
}
return cases[result] || normalPayAmount()

Lars Grammel • Sep 30 '21 • Edited

While I like the object construct and use it in many cases where the values are constant, in this particular case here, it would change the runtime behavior and could lead to unnecessary overhead and bugs. With it, all three functions deadAmount(), separatedAmount(), and retiredAmount() would be called regardless of the actual value of result. Those computations have overhead, could error out, and could have side effects.

Also, in cases where the values are constant and using an object lookup would work, using ?? instead of || for the default value would be even better. If the result for the case is 0, || would trigger because 0 is falsy and normalPayAmount() would be returned, which could be a bug. With ?? this would not happen.

Lars Grammel • Sep 30 '21

Small bonus: this variant would work without the downsides. However, I think it's harder to understand than the approach with guard clauses / early returns:

const cases = {
  isDead: deadAmount,
  isSeparated: separatedAmount,
  isRetired: retiredAmount
};
return (cases[result] ?? normalPayAmount)();

RRKallan • Oct 18 '21

Using ?? or || depends on expected behaviour.
Your argument could be also the another way. So which is better to use depends on expected behavior

Lars Grammel • Oct 18 '21 • Edited

In the original code it was function calls. ?? does not change the behavior in this case, || does if the function returns 0. I'm assuming that the functions return an amount tho, so point taken.

RRKallan • Oct 18 '21

if we look to the original code then my assumption isDead, isSeparated & isRetired are booleans.

So in the solution provided as object result needs to be set.

a possible solution could be

function getPayAmount() {
    const cases = {
        deadAmount,
        separatedAmount,
        retiredAmount,
        normalPayAmount,
    };
    let result = "normalPay";

    if (isDead) result = "dead";
    if (isSeparated) result = "separated";
    if (isRetired) result = "retired";

    return cases[`${result}Amount`]();
}

Lars Grammel • Oct 18 '21 • Edited

Agreed. Overall this goes back to my point that an object lookup is not the best refactoring here, since there is a risk that it'll change behavior and introduce bugs. Plus it adds unnecessary cognitive complexity.

Btw, I'm a huge fan of using the object lookup pattern when there is a need for it, e.g. when there are many entries or when the entries need to be assembled. In this example tho I think simple if statements are way easier to understand.

RRKallan • Oct 18 '21

Agree that if statements with return is easier in this case

Victor Ocnarescu • Sep 30 '21

I have to agree with the author, it's kinda hard to read. Early returns (or guards) are better IMHO as they are simple to write, read and understand.

Jonathan • Sep 30 '21

Yes, is it a better refacto !

moay • Sep 30 '21 • Edited

The term "guard clause" could be somewhat confusing here, because the typical guard clause is not intended to solve the problem of nested logic with different outcomes but to stop the execution of a function in case some condition is not met (so kind of a bouncer or an execution guard).

What you did here is pretty close to the so called "early return pattern" which looks similar and contains guard clauses, but actually solves a different problem and has a wider scope. To read more about early return: medium.com/swlh/return-early-patte...

I am aware of refactoring.com and Martin Fowler, still wanted to point out that in this specific case, most people will probably name the child "early return" instead of "guard".