DEV Community

Cover image for 5 best practices for clean coding in JavaScript
Deepak Sisodiya
Deepak Sisodiya

Posted on

5 best practices for clean coding in JavaScript

“Even bad code can function. But if the code isn’t clean, it can bring a development organisation to its knees.” — Robert C. Martin (Uncle Bob)

Clean coding means that you write code for your later self and your co-workers and not for the machine. Your code must be easily understandable for humans.

Here are some of the clean coding practices which I follow while writing Javascript code. These are not framework-specific practices and can be used with any framework.

1. Write simple code
Code should be simple enough to understand. For example, if we have to write a method that takes an array of number and return the new array with each number in array double its value. This can be implemented as.
Alt text of image
Instead of the above code, we should do it like this.

2. Write linear code
Nested code is hard to understand. Always write the linear code as much as possible. It makes our code simple, clean, easy to read and easy to maintain thus makes developer life easier.

For Example, let’s write a function which sends the email to the issue owner.


Now let’s look at the same code implemented with async/await


Let’s look at another example

Now let’s look at the same code implemented with the fail-fast approach.

3. Better naming of variables and methods
It improves code readability and code become easier to maintain. Names should be meaningful and have context. By reading the name of function or variable one should understand its purpose. Example

Always make affirmative names. So instead of isNotActive use !isActive

4. Functions should do one thing
Function should not be larger than 20–25 lines. Smaller the function is better. Function should either modify or query something but not both. Consider the following code.

The same thing can be done in a cleaner way

5. Use ESLint, Prettier and latest JavaScript
Always use ESLint and Prettier to make common coding style across developers, find syntax error and code formatting. Use JavaScript latest features to write code, like de-structuring, spread operator, async-await, template literals, optional chaining and more. Some Examples are


I hope this post has been helpful and thanks for reading. The feedbacks are always welcome.

Top comments (19)

Collapse
 
tawaliou profile image
Tawaliou

You're just very good. Your post must be display in the all software room😎😎.

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Thank you so much. Thank you for the kind words. You are always welcome.

Collapse
 
tawaliou profile image
Tawaliou

When I was read your post I😂😂😂 remember my last javascript code and think that I respect some points that you've considered but I don't follow the rule about avoid complex using of many functions, so I will change habits

Collapse
 
sounix profile image
Aldrin Gonzalez Cancino

thanks

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Welcome...

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy

It's really awesome guidelines keep up man.

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Thank you man :)

Collapse
 
sanderdebr profile image
sanderdebr

Great overview, thanks!

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Thanks for reading.
You are welcome.

Collapse
 
steevn profile image
steevn

Thanks for the nice overview. I love that type of post @dev.to - really helpful for me.

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Welcome
I am glad that you found this post helpful.

Collapse
 
thisisthien profile image
Thien Nguyen

Thanks.
It's better that you can use code syntax highlight for the post instead of the screenshot ;)

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Sure, I will use it from next time :)

Collapse
 
en profile image
EN

thanks

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

You are welcome

Collapse
 
ryansutrisno profile image
Ryan Sutrisno • Edited

thanks for share :)

Collapse
 
lortonx profile image
lortonx

your code is good, but less efficient than regular loops

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Thanks for reading
You are welcome.

Collapse
 
anoopror profile image
Anoop Kumar Chaurasiya

You are the rock of the software field. This post is very useful for me.
thank :)