Looking back the code when the days I don’t know about Clean Code (or lazy), I having a hard time to re-understand it cause I just randomly assign variables with uninformative names.

Now let’s try to avoid that mistake with Clean Code.

Photo by Maxwell Nelson on Unsplash

What is Clean Code and Why?

“Clean code is code that has been taken care of. Someone has taken the time to keep it simple and orderly. They have paid appropriate attention to details. They have cared.” — Robert C. Martin

Clean code is a code that can be read, understood, and modified conveniently. That is the basic concept of it, because you write code not just to be understood by yourself or the computer, other developers as well. If your code is clean, easily read — then developers can debug and add their code without thinking twice what the written variable or function means. If you need to explain the code to other developers, then it’s a bad code, working yes, but bad.

“WTF IS THIS SUPPOSED TO MEAN?!”

Yeah, that most people reaction when they read our teammate bad code in Web Development Course. Clean code can reduced our detective time in code, reduced our cursed word :D, and make your code a pleasing documentary and elegant.

Clean Code Characteristics

  • KISS — Keep It Stupid Simple : Make your code simple as possible to avoid unnecessary complexity.
  • Elegant : Clean code should be pleasing to read and make you smile like seeing a good looking car
  • Focused : Each function, class, or module should be focused on one task
  • DRY — Don’t Repeat Yourself : Contains no duplication
  • There’s a test for it

How to Write Cleaner Code?

Meaningful Names

Use explanatory names. Choosing a good name can save your time in the long run and easier debugging. The name of a variable, function, or class should explain itself and tell you why it exist, what it does, and how it used. Try to avoid using comments in naming.

bad example

A name should be expressive. When someone reading that code, developers gonna have a hard time to grasp what it means.

good example

A better name would be nowTime, it’s explain itself that the variable is current time.

Class Names — Classes or objects should have noun or noun phrase like Customer, DashboardPage, or Car. Avoid verb words like Filter, Cry, or Accept.

Function Names — Function should have a verb or verb phrase like AcceptPayment, FilterData, or DeleteAccount.

Functions

Functions should be small and smaller. Means that blocks within if statements, else statements, while statements and so on should be one line long. If there’s more than one line, then it’s probably need to make a new function. Not only this adds documentary value, the function can explain itself what it’s doing.

good function

From the example, the reader understood the function easily that the function is to reset the search value and the function only focused on resetting the value.

Comments

unnecessary comments

Avoid using comments to explain a variable or function. You’re blunder if you trying to prove your point from a comment. Right now, modern programming language is easier to explain a variable or function from just it names. Correct use of naming can prevent comments.

Our Project Implementation on Clean Code

On our PPL project, we implement Clean Code with helper tools to make our code cleaner. With cleaner code, our team members can understood the code faster and easier.

good function naming and focus

We use meaningful names like isLoggedIn() to explain that the function return true if the user is logged in on the browser, return false otherwise. Also we keep the function small so it focused on one task.

consistent function naming

We use ‘handle’ keyword for function that called when an onClick event is triggered. Consistent naming scheme can make our code more elegant and reduce reader memory load.

Tools we use to make our code cleaner

  • Prettier — Prettier is a code formatter which format our code to follow stated rules like naming, indentation, max length, and etc.
  • ESLint — ESLint is an analysis and formatter tool to check our code style, and quickly find problematic patterns. There’s many popular rules for ESLint like google rules, airbnb rules, and etc. We use airbnb rules for our linter because it’s the most used one and most people code their JavaScript following these rules.

Conclusion

To sum up, we use Clean Code to make our code more readable and make other developers happier when reading our code. Also clean code can reduce our development time in the long run and easier debugging in the future and for others.

That’s all I have for Clean Code, make sure to read my recent articles.

For more in depth information, you can read Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin

References

https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c

Computer Science Student of Universitas Indonesia