Code Smell 252 - NullCustomer
Tags: webdev, javascript, beginners, programming
Published: 2024-05-17 23:30:29

*You love Null Object Design Patter because it avoids the billion-dollar mistake*

> TL;DR: Prefer real domain names to Implementation names

# Problems

- [Bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) Fault

- Naming

# Solutions

1. Search for a real-world metaphor

# Context

Naming is essential when designing software.

Using Pattern Names is a common [software problem](https://dev.to/mcsee/code-smell-25-pattern-abusers-2dgi) where programmers bind design patterns to real-world concepts.

You need to search for these abstractions in the real world and name them after their essential behavior instead of the accidental structure.

Null Customers don't exist in the same way [NULL](https://dev.to/mcsee/null-the-billion-dollar-mistake-1h1c) doesn't exist.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/b13e79a85fdd706f17dfff192a8a4b6f)

```react
import React from 'react';

const NullCustomer = () => {
  return (
    <div>
      <h2>No customer found</h2>
      <p>Sorry, we couldn't find any customer matching your criteria.</p>
    </div>
  );
};

const App = () => { 
  const customerDataAvailable = false;

  return (
    <div>
      <h1>Customer Details</h1>
      {customerDataAvailable ? (
        <div>
          {/* Render customer data */}
          <h2>Customer Name: Cosmo Kramer</h2>
          <p>Email: cosmo.kramer@example.com</p>
          <p>Phone: 123-456-7890</p>
        </div>
      ) : (
        <NullCustomer />
      )}
    </div>
  );
};

export default App;
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/15f41dcd4d4f1c89e8b31348d6649740)

```react
import React from 'react';

// This is more closely related to real world
const InexistantCustomer = () => {
  return (
    <div>
      <h2>Inexistant customer</h2>
      <p>Sorry, we couldn't find any customer matching your criteria.</p>
    </div>
  );
};

const App = () => { 
  const customerDataAvailable = false;

  return (
    <div>
      <h1>Customer Details</h1>
      {customerDataAvailable ? (
        <div>
          {/* Customer exists */}
          <h2>Customer Name: Newman</h2>
          <p>Email: newman@example.com</p>
          <p>Phone: 666-666-6666</p>
        </div>
      ) : (
        <InexistantCustomer />
      )}
    </div>
  );
};

export default App;
```

# Detection

[X] Semi-Automatic 

You can search for names including implementation patterns and check if they represent a real-world concept

# Tags

- Naming 

# Level

[X] Beginner

# AI Generation

AI generators are better at finding these names and don't abuse design patterns unless we prompt them.

# AI Detection

When prompted to use better names with the wrong code tested AI suggested a few, but none detected by itself as a mistake.

# Conclusion

Some concepts are harder to find than others.

Choose your names wisely.

# Relations

{% post https://dev.to/mcsee/code-smell-25-pattern-abusers-2dgi %}

# More Info

{% post https://dev.to/mcsee/null-the-billion-dollar-mistake-1h1c %}

# Disclaimer

Code Smells are my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [engin akyurt](https://unsplash.com/@enginakyurt) on [Unsplash](https://unsplash.com/photos/two-black-and-white-folding-chairs-on-beach-during-daytime-2-eCuma3qO0)
    
* * *

> We comfort ourselves with the belief that if the customers had just been happy with what they said they needed, the design would have been fine. It’s the customer’s fault for changing the requirements on us.

_Robert Martin_
  
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}