DEV Community

Cover image for Code Smell 145 - Short Circuit Hack

Code Smell 145 - Short Circuit Hack

Maxi Contieri on June 30, 2022

Don't use boolean evaluation as a readability shortcut TL;DR: Don't use Boolean comparison for side effect functions. Problems Read...
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

What about optional chaining? Which of course only works with functions designed to be chained, like user?.isValid()?.logUserIn();

Collapse
 
moopet profile image
Ben Sinclair

I'd use that for finding a deep value but not performing an action:

if (user?.foo?.bar) {
  user.login();
  // or...
  logUserIn(user);
  // or whatever
}
Enter fullscreen mode Exit fullscreen mode

Also, the implication in your example is that isValid() returns a user object when that's not obvious - it looks like it should be a boolean.

Collapse
 
feliciousity profile image
Felicia Ann Kelley

It has to be a boolean, boolean is how the data is first made.

Thread Thread
 
kentaro_tanaka_5b2893f1d1 profile image
Kentaro Tanaka

The condition essentially evaluates to a boolean value, determining whether the nested property user.foo.bar exists and is truthy.

I am also engineer. Can we discuss more details?

Collapse
 
mcsee profile image
Maxi Contieri • Edited

Null is the worst code smell

And optional chaining, IMHO hids this antipattern.
I've written a smell on optional chaining. I will publish it in the following weeks

hackernoon.com/null-the-billion-do...

And optional chaining is another code smell

Collapse
 
larsejaas profile image
Lars Ejaas

But we are not always writing the data or code with null ourselves.

One example: Auto-generated types made with GraphQL Code Generator.
We still need to be able to handle null.
Null does indeed make sense if you do not know if data will return empty.

Collapse
 
omarbenmegdoul profile image
Omar Benmegdoul • Edited

Why is this a problem specifically before a side-effect?

Something like myFunc?.() will force people to pause. On the other hand short-circuits are a common pattern when setting default values or optionally rendering React components. People are used to reading them in other contexts, often with function calls on the right, so why do they become less readable in this one?