September 09, 2019

What to look in Good JavaScript Code?

Hello Developers,
For a Javascript developer, no matter at what stage of the programming they are it is important to learn and understand what are the things one should have in their code. These things will also help one in maintaining their code-quality, fewer comments in code review and many more advantages.
Here are the few points but not limited to these:

#1. Coding

a. Avoid global variables
We all are aware that using global variables is good harm to our codebase by hitting our browser memory. With this, we should also understand the difference between var, let, and const. Especially when to use what and why? Avoid using var and get yourself in the habit of using let and const.

b. Use ES+ features
Thanks to the ECMA they have taken down a lot of pressure from JS developers by introducing new features. If you are not using these features then you are missing the actual programming fun and reinviting the wheel by writing the code which can be easily replaced by ES new methods and features. Such as now ES comes with the class keyword. Now, we don't need to write the whole class kind of code and similarly many more such syntax, features. So, start learning and using them.

c. Understand the difference between Object and Array
JavaScript doesn't have many data structures. Mainly you will be playing either with Objects or Arrays. So, it is important to understand the difference between both in terms of how expensive using them could be when we are doing CURD operation. This will help one to optimize the code.

d. for vs vs for..each
In JavaScript developers loop on the data. There are already a few choices available which actually create the confusion. One needs to understand the difference and again when to use what and why it very important.

e. No tight coupling of the values and data
The reason for using JavaScript in your code to avoid the static content and data. To introduce the interactivity by dynamic content, data and UI update. If you are doing hard coding of the data in your JavaScript please don't do that. Look for the dynamic data updating.
Similarly, avoid tight-coupling of the classes, ids and tag names, etc.

f. No frequent repaint and reflow
This is very much related to the above point. If you are coming from the ReactJS you must be aware of avoiding re-render. This concept is from JavaScript only. When one creates a dynamic UI by JavaScript, there will be a lot of DOM manipulation, UI adaptation, etc. which means JS developer needs to be very careful to avoid frequent repaint and reflow.

g. No use of Linters
It is always a good idea to share your load with some other and especially with automation. There are many rules one can implement by using Linters. Linters will take care of throwing warnings as a gentle reminder while you are busy in taking care of the complex coding. It is a good idea to add rules and make them the part of your project and workspace.

#2. Architecture

a. Clear Architecture
It is very important to have a clear architecture of your project. The first thing one going to check is the way you have architectured your project and design your folder structures. So, do not hesitate to spend time on designing the architecture of your project. The one rule you should follow is - "Single responsibility". So, keep the same files into the same folder. So, 3rd party lib should go in a separate folder, custom lib should go in its own folder and so on.

b. Follow one pattern only
When you are writing JavaScript always follow a JavaScript pattern. Why? Patterns are very important to bring all developers on the same page. They can understand just looking at your pattern what is going on.As well as, patterns are very useful when you want to scale your code, and if you know what your code is going to do there is a pattern for almost every such situation.

c. Clear Comments
Never ever underestimate the power of comments. Comments are the way you can help the fellow developers to help to understand your code.

d. Use the right Data structure
JavaScript has Objects and Arrays. As a developer, we should learn and understand where to use what. Picking the right data structure is very important. As DS impact the performance of your program.So, understand every data structure's use-cases, benefits, and limitations.

e. Reusability
One of the rules of programming is "DRY - Don't Repeat Yourself". Hence, focus on reusability when you are writing your code. If you are re-writing the same code, again and again, it is time to make the function and use it as many times you need. It is called Reusability.

Happy Learning!!

No comments: