• JavaScript Video Tutorials

JavaScript - Style Guide

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');
         function func() {
            output.innerHTML = "Function executed!";
            return 10;
         }
         func();
      </script>
   </body>
</html>

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>

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>

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 camelCase
      function executeGreet() {
         output.innerHTML = greetMessage;
      }
      executeGreet();
   </script>
</body>
</html>

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>

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>

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 statement
   const arr = ["one", "two", "Three"];

   // Compound statement
   for (let i = 0; i < arr.length; i++) {
      output.innerHTML += arr[i] + "<br>";
   }

   // Multi-line statement
   if (10 > 9 && 10 > 5 && 10 > 6) {
      output.innerHTML += "10 is greater than 9 and 10 is greater than 5 <br>";
   }
</script>
</body>
</html>

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>

We have explained the common style conventions in this tutorial. However, you can have your own coding conventions and follow them throughout the project.

Advertisements