10 Tips to write cleaner JavaScript code
Let’s scrub those variables and functions clean
Javascript is one of the most used programming languages on Github and is used by over 97% of all websites running. In recent years with the introduction of several frameworks, which cover everything from backend and frontend web, to cross-platform mobile apps and even games, the popularity of Javascript has reached great heights.
Writing clean and readable code is one of the most important things after constructing business logic. From my experience working with several organizations, startups, and projects, I can vouch that dealing with bad code is a nightmare. It slows down the development process, delays releases, and frustrates developers working with it. There is this saying in the developer community that -
Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live
Since your life can be at stake here 🥲, let me quickly guide you through some of the essential tips to keep your JavaScript clean.
1. Variable names — Keep ’em meaningful and pronounceable
Your variable names should be such that they clearly explain their purpose. Also, avoid confusing acronyms and hard to pronounce words. As a bonus, try sticking to the usage of an appropriate case, such as the (lower) camel case.
I don’t know how I can emphasize this more. Let’s look at the example below:
2. Variable names — Keep ’em searchable
Even though some articles will tell you NOT to create variables when you can use monomorphic forms, one should not stretch this to use constants, making the code harder to read and search. Also, the right idea is to store them in const variables and use the CONSTANT_CASE for naming the variables. For instance, look at the following snippet:
3. Avoid mental mapping for variables
It is good to explicitly name variables inside the array.forEach() instead of using shorthands that might not make sense later.
4. Avoid unnecessary context
If the class or object name already tells you what it stands for, don’t add that information again to your variable names. In the example below, since we already know, we are talking about Car or paintCar you don’t need to mention the context car again in your variables.
5. Use default arguments in your functions
Avoid usage of short-circuiting or conditionals in your functions to keep things cleaner. More importantly, remember that only undefined arguments will be provided with values by your function. Default values will not replace any other falsy values.
6. Use function arguments wisely
As a rule of thumb, try and keep the number of your function arguments limited to 2 or at max 3. If it’s taking so many arguments, there is a possibility your function is just doing too much. However, if you still need it, use a JavaScript Object as the argument. To make it obvious what properties the function expects, you can use the ES6 destructuring syntax.
7. Functions should do one thing
Don’t forget what functions are meant to do — add modularity to your code. Smaller functions with each doing one and one task only will ensure that your code is easy to write, test, and understand. Never set multiple goals for a single function.
8. Function names — keep ’em meaningful
Make sure you write functions with names that clearly say what the functions do. Ambiguous function names mean readers will have to look at the function definition and logic to understand their job.
9. Avoid duplicate code — make things shorter and cleaner
What hurts most is a bunch of the same or similar lines in multiple code sections. We all have come across such a scenario. This usually happens because some logic is slightly differently implemented in 2 or more places. However, think of the nightmares someone will have if they find a bug in the logic, and now they have to modify this everywhere.
10. Don’t use flags as function parameters
Why will you need flags as function parameters? For only one apparent reason, your function is doing multiple things. And from point number 7, you know that’s a bad practice. So, go ahead and split your function into two.
Conclusion
Most of the above tips work with many programming languages, not just JavaScript. If you are looking for even more information for writing clean code in JavaScript, head to this repository. This article is inspired by the content there.
And if you are a beginner and you got overwhelmed, just remember that it’s called good coding habits, and it always takes time to get into a habit. It’s essential, however, that you make sure you know what habits to make, and you practice them so that with time, they just feel natural!
I would like to conclude by mentioning that don’t write clean code only in fear of the guy maintaining your code later on, but write it for yourself so that you don’t end up crazy later like this -
Do you also make apps with Flutter? I wrote an article here 5 Steps to Secure your next Flutter app. Go ahead and give it a read.
You can follow me on LinkedIn and also check out my Youtube channel.
