Cleanse your Code
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.
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.
A name should be expressive. When someone reading that code, developers gonna have a hard time to grasp what it means.
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.
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
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.
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.
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