Make Your Day with Clean Code

8 min readApr 1, 2021

Illustration of Clean Code, taken from 7 Tips To Write Clean And Better Code in 2020 — GeeksforGeeks

This article is written as an Individual Review Assignment for PPL CSUI 2021

Ever heard about Clean Code? What do you think the first time you heard about that? Eh, a code that was clean or a code that was washable?! (It is obvious that code can not be washed anyway)

So here in this article, I wanted to talk about Clean Code. I bet when you were told to read other people code you do expect it to be easy to understand and easy to your eyes. Instead of mixed bag of word that make you think “WHAT IS THIS????????????” every single minutes.

Best Practice to Write a Clean Code

In order to make sure that your code can be easily understand by others, you need to make your code as clean as possible. Here, a few simple point that you can apply to make a Clean Code. There is going to be a few example applied in my Project.

1. Meaningful Names

When you write your code, make sure that every naming that can be provide information. So that just by looking by variable name you know what is contained inside that variable, and by looking a function name you know what those function do. Meaningful names should be applied on function, class, and variable.

const d = 0;

When you see this, what is on your mind? What is those variable d doing here? It is containing an Integer number, but for what? Guess what, only those who write those code know that or until you re-read the entire code using those variable again and again.

Figure 1.1 — Meaningful Names used on Variables

On the example above, you can clearly see that there is a variable named “search”, “status”, and “stock” containing String. Based on name alone, you can already tell that those variable contain what has been searched, a status that was set, and stock criteria set.

Figure 1.2 — Meaningful Names used on Function name

Those naming does not only apply on variables, make sure that you do that on function too. By looking at the function above, you can already tell that this function was dedicated to do a filtering based on searched keyword.

Oh yes, do not forget to follow the naming rules based on the code language that you used. Like in JavaScript, you can use camelCase for variables and functions. Do note that naming does not limited only for variables and functions but classes too.

2. Small Function

When you create a function, make sure that the function literally do only one things. Do not force everything inside one god-function. The moment you faced an error or bugs, you will be doomed by those “god” function you just created.

Figure 2.1 — Example of not small functions — “god” function

The example above is one of “god” function, where everything simply squashed together inside one function. Trust me, you will hate this idea if your code does not work well, searching for bug is hell. Other people that was supposed to rework on your code will be even hate this more than you.

Above here, there is example of small function. You can clearly see that each function would only filter thing based on their own filtered thing. The filterSearch() function literally only care about filtering based on keyword and so the others. When you found a bug, this kind of function will be easier to deal with, you can clearly analyze which function is making mistake.

3. Only do Comments if necessary

Documentation clearly is something that was important, however some people misinterpret this. They tend to write every single line plus a comments. It is fine if there is not lot of code around, but imagine that there is thousand line and almost every single 1–5 lines there is a comment. I bet you wanted to blow your screen, but just imagine that okay.

By those example above, I bet it will feels bad for your eyes. Remember it is only just three lines anyway. But it is good enough to hurt your eyes.

Figure 2.4 — Example of uncommented code

Try to compare the example on Figure 2.4 with Figure 2.3. I bet you would love the Figure 2.4 way better. So, rather than make an useless comment, make sure that you write a good code! Only write comments when you code is not good anyway, but I would rather make a good code than writing a comment for bad code.

4. Limit you lines and follow the Conventions

Limit how many character can be contained in single lines. It will be hard if you placed too many character in single lines, especially if you have a single and small screen.

Figure 4.1 — Example of lines that was too long

Figure 4.2 — Example of lines that was not too long

When you compare Figure 4.1 with Figure 4.2, you will appreciate the Figure 4.2 for sure. Especially when you were using an extra large or extra small fonts with small single screen.

5. Wrap related things to a single Object

Figure 5.1 — Each class only do it’s own thing

When you wanted to make a code, make sure that you separate a job into a single Object. Like the example above, do not mix wrap the ProductFilter inside the AdminProductList, because filtering only do filtering and that does not have anything to do directly on AdminProductList. For example, you have features to buy product and walk around the mall. It is not logical to mix both buy product and walk around the mall inside one Object is not it?

6. Do some Error Handling

Figure 6.1 — Example of function that do some Error Handling

The example above is not part of my Software Design Project.

When you write a code, do not forget to add some error handling. It is not a good idea to return a Stacktrace of error to an user. Further more, rather than returning something with null value, it is better to just return some exception. By using Error Handling, it is easier to find what is the cause of error as well.

7. D.R.Y (Don’t Repeat Yourself)

When you make a code there is a chance that some part of code will be used more than once. It is something that you cannot escape anyway. So, imagine that you have part of code that was going to be used in multiple place and each consist of around 100 lines, and then there is a little change need to be done between those 100 lines of code. It is going to be really painful to repair it one by one, and there is a chance that you misses some.

How to apply D.R.Y then? Easy, you can encapsulate those code that is going to be duplicated. Like for example in Figure 7.1 this encapsulation was done using React Functional Component. Whenever I needed to use this part of code, I just needed to call the function. By doing this, you do not need to be afraid to apply changes to a component that was used in lot of page.

8. Unit test

What a unit test is a clean code best practice? I don’t know!, well you should know then. When you are making a test for a code (especially in TDD), you should start from making a code from small portion. Then, after creating some functionality, it is possible for you to use it in a bigger function. This way, you are creating a code with small function already, yay!

However, it is not limited to creating a small function using unit test. By using a unit test, you can basically do a testing by yourself. Also, a unit test make possibility for another people to see which case have not handled yet based on your code.

I think I have made a Clean Code, any tips to confirm this?

To confirm that you made a Clean Code, you need to check is your code contain a code smell? If it is, then you code is not a clean code yet. If you found a Code Smell, you can start to refactor your code. Since this is an article about Clean Code, I will not explain a lot about Code Smell, rather you can check it here.

In My Opinion

Clean code is something that was really important. It is something that every Software Engineer have to master. I bet no one wanted to read a code that was total disaster that need extremely painful effort to refactor the code just because it is bad.

If you think that Clean Code is not something important, try to say that again when you were told to maintain a project that was going to be running for long time with continuous update. You will definitely found how important it is. Implementing one will help others to continue you work far easier as well.

Implementing a clean code is not an easy job, but in the end having one will paid your effort. Someone who can make clean code will always be preferred more than those wo cannot.

My article ends here, thank you for reading. I hope that this article is useful for anyone reading this article, I hope you will start to make clean code as well. Have a nice day :)

Reference :

7 Tips To Write Clean And Better Code in 2020 — GeeksforGeeks

Clean Code — A Handbook of Agile Software by Robert C. Martin