JavaScript Guideline for Writing Clean Code
Have you ever heard that your code is not readable or is not clear for others, and you could not guess why? If yes, so this article for you.
One of the problems you will face while writing code in any programming language is writing readable code. That means you should write the code which you can understand in the future a year from now. Also, the code should be legible and understandable by other team members.
So What We Mean by a Clean Code :
When we write a clean code, we should take care of our indentation, commas, variables name, functions name, comments, and the whole look of our code. There is no unique rule to follow. Here are the most prevalent standards:
You can choose one of them while writing your code. As a team, you can agree on your standards of writing a code. Here we will describe the most general rules for writing a readable code.
Let’s Dig Deeper :
- Variable Naming:
The name of the variables should describe what they represent. For example, do not use a variable name like A, B. Use meaningful variables names. Also, variables with multiple parts should follow the camelCase rule. And when we define a constant variable, we capitalize all letters of it.
here is an example of good naming:
2. Spaces:
Spaces will affect the look of your code too much. That’s why you should always give them your attention. Here are some useful tips to follow:
2.1 Curly braces:
- Curly braces opening bracket should be at the same line as the causing keywords like:
if, for, while, etc. - Space should be between parentheses and the opening bracket.
- The block code should be in the next line with a tab distance away from the keyword’s start.
- Always put the closing bracket on a different line with an alignment to the beginning of the keyword.
2.2 When defining a function: no space between the function name and parentheses.Also no space between the parentheses and the parameters. We only need spaces if we have multiple parameters, as shown below:
2.3 Through your code, we need to add a space between the variable definition and the next logic. Always when switching between logics, we need a one-line space between them.
2.4 In the conditional clause, we put the else word next to the closing bracket of the if condition, and we separate between them by a space:
2.5 Spaces also favored between arguments and around operators.
3. Functions
When writing a function name, try to be a descriptive name. to know what the function does by its name. Another point, try to make each function does one job. All logic and variable inside the function should be indented with a tab (2 spaces) away from the beginning of the function, and the closing bracket should have the same indent of the function name.
4. Line length
Resources suggested splitting a long horizontal. Usually, the length of the line is between 80 to 120 characters. As a team, you can agree on different considerations.
5. Comments
We use comments to explain how and why a code is working. Good comments will help to maintain the code easily.
Comments can be single-line: starting with // and multiline: /* … */.
In general, the excellent code will have fewer comments or not at all. And you can achieve that by writing a descriptive naming for functions and variables. Also, by splitting your codes into small blocks of code, each one does only one thing.
It is still good to comment :
- The unclear piece of code.
- If there are different solutions to a specific problem and choose one as the best, you should explain why you made that choice.
- You need to comment on function usage. There is a special syntax JSDOC to document the functions.
- If you find a solution to a part of your code online it will be helpful to add a URL to it in the comments.
Useful Extensions:
There are lots of extensions that do the above work for you and format your code automatically. I will mention some of them:
Wrap up. Those are some points to take care of when writing your code. So your code will be easier to read and understand.
For further information, check this link:
