Master the Art of Clean Code: A practical approach

We often discuss various architectures, but there are other important and simple things that can be done to keep code clean and manageable in the long run. In this article, we’re going to examine what good code is, and what qualities of good code are. That’s because those qualities come before programming principles. Programming principles are just guidelines to help us apply those qualities to code.

Developers not only write code but also dedicate a considerable amount of time to reading it. In fact, reading code often surpasses the time spent on actual coding.

Have you ever considered how frequently you review the code you’ve just written? Obviously, the ratio is in favor of reading than actual coding.

If we spend a significant amount of time understanding and reading code, it is important to ensure that our own code is clear and easily understood by our colleagues.

So here are 5 tips that can help keep you from being that programmer.

Use Meaningful variable Names

Everywhere we code, we have the control to choose meaningful names: variables, functions, classes, packages, files…Taking it seriously is the first step to having Clean Code.

// BAD
let days;// elapsed time in days

// CLEAN 
let daysSinceCreation;
let daysSinceUpdate;
let ageInDays;
let elapsedDays;

In the case of booleans, the variable name should be a question that can be answered with yes or no, such as

const isValid = false;
const hasAuthorization = true;

Write code that expresses intent

Having clear and distinct names for variables and functions is crucial to avoid confusion and ensure their intended context and meaning. So when you are writing a function you should remember two things to make your function clean and easy to understand…

1. They should be small.
2. They should do only one thing and they should do it well.

Let’s look at an example of good naming:

function getActiveAccount(studentId){                  
     // ...
}
function getActiveAccountInfo(studentId){ 
     // ...
}

Select a naming style and stick with it consistently. Whether it’s camelCase or under_scores, choose one that suits you best and use it throughout your code.

Give your functions, methods, and variables names based on their purpose or characteristics. If a method retrieves something, include “get” in its name. Similarly, if a variable holds the gender of a user, name it userGender for example.

Important: If you find it challenging to name your function, it may be a sign that it’s trying to do too many things at once. In such cases, it’s a good idea to break it down into smaller, more focused functions. In such case, you can use these 2 principles.

1. The function body should not contain more than 2 levels of nesting
2. A function should take a maximum of 3 arguments

Group Similar Functions Together

As your projects grow in size, it’s common to have numerous functions. To maintain a well-organized codebase, it’s recommended to keep all your function declarations at the top of the page or grouped together in one place. This practice not only helps improve code readability but also enhances search efficiency. By doing so, you can easily locate and access the function you need, making your coding experience smoother and more efficient.

export function read_data(file_name) {
  // ..
}

export function write_data(file_name) {
  // ..
}

and

import { read_data, write_data } from './utils.js';

You can now call the utility functions within the component.

Express yourself in code rather than in comments

There is a saying, “Code should be self-documenting”, which basically means, instead of using comments, your code should read well enough to reduce the need for comments.

POV: Comments are often lies waiting to happen. eg: You added new features and forgot to change previous comments.

Use consistent formatting & indentation

Think of code as an article, where consistency is key. Just like an article with inconsistent line spacing, varying font sizes, and scattered line breaks can be hard to read, the same holds true for your code.

To ensure clarity and readability, it’s important to maintain a consistent and organized structure in your code. By using formatter like black or prettier you can automate the formatting.

There is a famous quote from Bill Gates, it goes like

“If you can’t make it good, at least make it look good” — Bill Gates

Here’s a good and bad example:

The Good

function testNum(number) {
  if (number > 0) {
    result = 'positive';
  } else {
    result = 'NOT positive';
  }
  return result;
}

The Bad

function testNum(number) {
if (number > 0) {
  result = 'positive';
  } 
  else {
    result = 'NOT positive';
  }
  return result;
}

One last argument

There is a final argument to clean your code if you are not completely convinced, There is an interesting quote from Martin Fowler

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Thanks for reading!

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.