DEV Community

Cover image for Code Smell 252 - NullCustomer
Maxi Contieri
Maxi Contieri

Posted on • Originally published at maximilianocontieri.com

Code Smell 252 - NullCustomer

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

TL;DR: Prefer real domain names to Implementation names

Problems

Solutions

  1. Search for a real-world metaphor

Context

Naming is essential when designing software.

Using Pattern Names is a common software problem 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 doesn't exist.

Sample Code

Wrong

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;
Enter fullscreen mode Exit fullscreen mode

Right

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;
Enter fullscreen mode Exit fullscreen mode

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

More Info

Disclaimer

Code Smells are my opinion.

Credits

Photo by engin akyurt on Unsplash


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


This article is part of the CodeSmell Series.

Top comments (0)