Should I use unnecessary function for readability sake

Question

I am implementing if/else statement, by using function "inCase" to make it more readable:

const size = 'small'

const equals = str1 => str2 => str2 === str1

const inCase = (obj) => (predicate) => (whenTrueFn) => (whenFalseFn) => {
    predicate(obj) ? whenTrueFn() : whenFalseFn()
}

const renderMobileNavBar = () => console.log("Rendering Mobile")
const renderDesktopNavBar = () => console.log("Rendering Desktop")

const otherwise = fn => () => fn()

inCase(size)(equals('small'))(renderMobileNavBar)(otherwise(renderDesktopNavBar))

But in this case "otherwise" function is completely unnecessary I could have called my function like this:

inCase(size)(equals('small'))(renderMobileNavBar)(renderDesktopNavBar)

It works the same, the only difference is in readability. So I wonder does it make sense to keep "otherwise" function just for readability?

Answer 1

We do a lot of things in programming just for the sake of readability - like giving variables meaningful names (instead of just naming them a, b, c, d, ...).

Or specificially conditionals - there is a good reason why many languages require an explicit else statement for the block to be executed or evaluated in the related case. However, there are also programming languages like Lisp where brevity is preferred over explicitness and the "else" part of the conditional does not require any extra keyword. So in the end, it is a matter of taste.

However, I think it is a really huge code smell when one starts to reimplement existing language constructs with alternate keywords for no apparent benefit. Any half-experienced Javascript programmer will immediately understand what

 (size ==='small') ? renderMobileNavBar() : renderDesktopNavBar()

means. But whoever reads

 inCase(size)(equals('small'))(renderMobileNavBar)(renderDesktopNavBar)

will probably wonder if there is special reason why a simple condition like the former is implemented in this overcomplicated fashion.

Answer 2

Possibly yes, but in this case no —- because your extra functions don’t make your code more readable.

 const renderNavBar = (size ==='small') ? renderMobileNavBar : renderDesktopNavBar;
/* whatever*/
renderNavBar();

Could make the code more readable, if there were some reason to repeat the condition in multiple places (or even just to have shorter lines).

But while this

inCase(size)(equals('small'))(renderMobileNavBar)(otherwise(renderDesktopNavBar))

reads as a simple english sentence, it screams unknown and hidden activity to a javascript developer (and screams even more loudly to a backend dev that has to work a frontend ticket).

If I had a ticket where the error seems to be in that area, I’m going to stop reading the surrounding code looking for the problem, and review those several times to make sure I’m not misunderstanding it and it’s not the source of the problem. That makes it the opposite of readability.

A simple ternary or even an if/else condition are unambiguous, I deal with them dozens or even hundreds of times a day. inCase, equals, otherwise? Never saw them before, and who would be redefining simple language constructs for no good reason?