A JavaScript style guide is a set of general rules that regulate how to write JavaScript code. These rules can include − which quotes to use, how many spaces to indent, the maximum line length, using single-line comments, marked with //, etc.
When any company starts developing a real-time JavaScript project, 100’s of developers work on that. If each developer follows a different style of writing code, it becomes very hard to manage complex code. So, it is important to follow the same code style throughout the project.
Here, we have covered some essential coding conventions to follow while developing the project.
Code Indentation
You should always intend your code with fixed spaces (either 2, 3 or 4 spaces) according to the coding convention of your project. Also, the code should not contain trailing white spaces.
Example
In the code below, we have used the three spaces indentation in the function.
<html><body><h2> Intendation Conventions </h2><div id ="output"></div><script>const output = document.getElementById('output');functionfunc(){
output.innerHTML ="Function executed!";return10;}func();</script></body></html></pre>
Comments
You should always use the line comments rather than the block comments, and line comments should start with the left part of the code.
Example
In the code below, we used the // line comments to comment the code.
<html><body><h2> Comment Conventions </h2><div id="output"></div><script>const output = document.getElementById('output');
output.innerHTML ="Hello World!";// var a = 10;// var b = 20;</script></body></html></pre>
Variable Declaration
Always declare the variable at the top of its scope. If a variable is a global variable, declare it at the top of the file. Similarly, if the variable is in th block or function, declare it at the top of the block or function. Furthermore, variable names must start with the letter.
Example
In the code below, we have declared the variable at the top of the code, and the name of each variable starts with a letter.
<html><body><h2> Variable Conventions </h2><div id="output"></div><script>var a =10;var b =20;
document.getElementById('output').innerHTML ="The sum of 10 and 20 is: "+(a + b);</script></body></html></pre>
Identifier Names in camelCase
In JavaScript, always use the camelCase convention to define the identifier. In the camelCase convention, the first letter of the identifier should be lowercase, and the first letter of the 2nd word should be in the uppercase. Here, identifiers include function names, variable names, object names, class names, etc.
Example
In the code below, 'greetMessage' and 'executeGreet' both identifiers are in the camelCase.
<html><body><h2> camelCase Conventions </h2><div id="output"></div><script>var greetMessage ="Hello Developers!";let output = document.getElementById('output');// Function name with camelCasefunctionexecuteGreet(){
output.innerHTML = greetMessage;}executeGreet();</script></body></html></pre>
Spaces, and Brackets
In JavaScript, we should include white space before and after each operator like +, 'typeof, etc. Furthermore, it is also vital to include white space around brackets.
Example
In the code below, we added proper space after the 'if' condition. Also, we added white space before and after += operator.
<html><body><h2> Space and all brackets Conventions </h2><div id="output"></div><script>let output = document.getElementById('output');if(9>10){
output.innerHTML +="9 is greater than 10";}else{
output.innerHTML +="9 is not greater than 10";}</script></body></html></pre>
Object Rules
In JavaScript, we use the = assignment operator and open bracket { after the object identifier. Next, we write the object properties (key-value pairs separated by semicolon), and we write each property in the new line and separate them with a comma (,). Also, we don't put a comma after the last object property. At the end, we add a semicolon (;) after adding a closing bracket.
Example
In the code below, we have defined the object according to the object guidelines. Also, we have shown objects on the web page using the JSON.stringify() method.
<html><body><h2> Object Conventions </h2><div id="output"></div><script>const obj ={
prop1:'value1',
prop2:'value2',
prop3:'value3'};
document.getElementById("output").innerHTML =JSON.stringify(obj,null,2);</script></body></html></pre>
Statement Rules
There are 3 types of statements in JavaScript.
- Simple one-line statement
- Compound statement
- Multi-line statement
The simple one-line statement should always end with a semicolon.
For the compound statement, we put white space and an open bracket after a statement in the same line. Next, we start adding the statement body from the next line, and in the last line, we add a closing bracket. We don't put a semicolon after the closing bracket.
If the statement is too long and can't be written in a single line, we can add a line break after the operator.
Example
In the code below, we have defined single one-line, compound, and multi-line statements.
<html><body><h2> Statement Guidelines Conventions </h2><div id="output"></div><script>const output = document.getElementById('output');// single line statementconst arr =["one","two","Three"];// Compound statementfor(let i =0; i < arr.length; i++){
output.innerHTML += arr[i]+"<br>";}// Multi-line statementif(10>9&&10>5&&10>6){
output.innerHTML +="10 is greater than 9 and 10 is greater than 5 <br>";}</script></body></html></pre>
Line Length
It is always hard to read long lines of code. So, we should put a maximum 80 characters in a single line.
Example
In the code below, we have added half a string in a new line as it contains more than 80 characters.
<html><body><h2> Line length Conventions </h2><div id="output"></div><script>let str =`This is too long a sentence.
Let's put the limit of 80 characters.`
document.getElementById('output').innerHTML = str;</script></body></html></pre>
We have explained the common style conventions in this tutorial. However, you can have your own coding conventions and follow them throughout the project.
