The JavaScript coding style
In every programming language, coding styles are really important. The coding style is not only for good looking but also helps to understand the code easily. That's why we should learn the coding style and follow them to make an impact on our code.
Syntax is really important in coding style. I am mentioning some syntax style rules bellow
- No space between the function name and the parameter
- A space between parameters
- Curly brace { in the same line after space
- An empty line between logical blocks
- Spaces around a nested call
- Else without a line break
- Spaces around operators
- The lines are not very long
- Semicolon is mandatory
Now I am discussing the rules in detail
Curly braces:
When we write a condition in JavaScript we must use curly braces in the same line with space after the condition.
Example-
If (n < 0) {
alert (`Number ${n} is missing`);
}
Line length:
You should avoid long horizontal lines in code. It is disturbing for the reader, you can use backtick quotes to split the lines. The maximum line should be 80–120 characters.
Example-
const para =`
Portuguese ships from Goa and Malacca began frequenting the port
city in the 16th century. The cartaz system was introduced and required
all ships in the area to purchase naval trading licenses from the
Portuguese settlement. Slave trade and piracy flourished.
`;
Indents:
There is an ideal space for horizontal and vertical indents. The horizontal indents should be 2 or 4 spaces and the vertical should be an empty single line
Example-
4 spaces padding at the left
const para =`
Portuguese ships from Goa and Malacca began frequenting the port
city in the 16th century.
`;
1 empty line break in vertical
const sentence = ‘The quick brown fox jumps over the lazy dog.’;
//
const index = 1;
Semicolon:
After each statement a semicolon is mandatory.
Example-
const index = 1;
Comments:
You should add comments to explain the used code easily anywhere in the code. But you should be careful about the use of comments.
Some basic rule-
Use fewer words and explain exactly what you want to do in this code
When you import any link you can add a comment about the reason for use
You can use a comment to explain any function shortly
Automated Linters:
You can use an automated linter to check automatically the right styles for your code. Automated linter also checks small bugs in the code.
Some popular linters-
JSLint
JSHint
ESLint
Nesting level:
You should avoid deep nesting in a function.
Example-
function pow(x, n) {
if (n < 0) {
alert(“Negative ’n’ not supported”);
return;
}
let result = 1;
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
Function placement:
You can place functions in two different ways.
- Code first then function or
- Function first then the codes
Example-
// function
function createElement() {
…
}
function setHandler(elem) {
…
}
function walkAround() {
…
}
// codes
let elem = createElement();
setHandler(elem);
walkAround();
You can find more coding styles in style guides. Some of them I am mentioning below
Note: If you need a developer to create website, please visit Rakibul Hasan or https://www.fiverr.com/s/x5oKVZ
