Clean Code: Your Future Self Will Thank You

Pande Ketut Cahya Nugraha
pepeel
Published in
5 min readMar 9, 2020

Intro

It is a common joke between programmers that only two being understand what a programmer’s codes do, God, and the programmer him/herself. The prevalence of the joke shows that it is common for programmers to code dirty, that is, a code that is hard to understand. Let me show you why in software development, dirty code is unacceptable and brings lots of detriment to you and your team.

A Tale of Dirty and Clean Code

On certain circumstances, coding dirty might be the best thing to do. For example, in a time-constrained environment such as a competitive programming contest, it is perfectly fine to write dirty code to save time. However, in a collaborative situation like software development, dirty code is a crutch that wastes time and raises conflict. Let me show you an example.

Take a look at the above CSS class. Can you guess what it divides? Why does there are two different dividers? Why the first one margin is 10px but the other one is 20px? This raises too many questions, and you can’t understand it unless you hunt down the programmer that wrote the code. And even then, the one that wrote it might not understand the code because s/he already forgets what the code purpose is.

What the above code want to accomplish.

Turns out that both are a classic example of CSS and HTML misuse. The author wanted to separate two different paragraphs using a line, but instead of using border-bottom properties, the author uses a div element with the above class applied. Now take a look at the cleaned version here.

Now, the purpose is clearer. We now can deduce from the class name that there are two sections with differing margin and a border-bottom class that apply a thin border on the bottom of the element. Also, the code is shorter, and no duplication is present.

A cleaner code

Another example. Read the above excerpt. With only a glance, you can tell that it is a function to handle a delete event. You might’ve never heard of axios, or understand redux and dispatch, but within a minute, you can probably tell the general flow of the code, i.e. calling an API with DELETE HTTP Method, with the purpose of deleting a template (inferred from the API_TEMPLATES_DETAIL variable), then probably showing a message and navigating to another page if the API call succeeded, and showing error if it fails.

Another code snippet that is clean. Even with a glance, you can tell that the purpose is to download a TemplateDocument, right?

Another aspect of Clean Code you can learn easily is complying with language standard. Take a look at the above code. It uses standard req and res variables that are commonly used by NodeJS programmer to denote the HTTP Request and HTTP Response object. Thus, any NodeJS programmer can easily figure out that the above code will respond to an HTTP request by downloading a file or sending a response denoting an error. The code also reduces redundancies as recommended by ESLint, a JavaScript Linter that check your code for cleanliness, by not using else on the return section. Using else on the above if clause is useless because thatreturn res.status(HttpStatus.NOT_FOUND) will be reached when templateDocument is null, regardless of the presence of else clause, thus it is simpler to not use else.

Given code like that, when your colleagues come across that code, they don’t have to waste a lot of time trying to understand it, they don’t have to find and bother you to explain that code snippet, and you, the programmer, can focus on producing code instead of arguing with your colleagues about your code. Everybody wins!

The Core of Clean Code

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

Ultimately, clean code in software development is about one and only one thing, making your code readable and understandable by others. A code that doesn’t need genius-level intellect to be understandable. A code whose purpose can be inferred in a glance. A code that speaks for itself.

When you are writing code, you must keep in mind that while now you can understand what your code does, you might not in the future. You might lose the context, or simply forget what your code does. Also, you often will not work alone in software development. You might have teammates that must use your code, and thus must understand it as well. That is why you must code cleanly, writing code that easily understood. Your team, and your future self, will thank you later.

Clean Code is not something you can learn in a day. I myself need 3 years and 3 internships (with lots of reprimand in code review) to learn to code cleanly. If you feel that your code is dirty, start cleaning it NOW! You might be discouraged by things often discussed on the internet about clean code such as D.R.Y Principles or SOLID Principles, but you can start small. Start by properly naming your variables and functions. Those two alone will make your code so much more readable and set you on the right path to be a programmer that code cleanly.

TLDR

  • Dirty code is confusing and time-consuming to understand
  • Code should be clean, i.e. can be easily understood in a glance
  • Learn to code cleanly from the very beginning.
  • You can start by properly naming your variables and functions.

Appendix

If you want to learn more specific things about clean code, such as Clean Code in React, do read my teammate article here.

References:

--

--