JavaScript - Style Guide

Quiz

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.


   
       Intendation Conventions

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.



    Comment Conventions

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.



    Variable Conventions

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 2^nd 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.



    camelCase Conventions

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.



    Space and all brackets Conventions

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.



    Object Conventions

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.



 Statement Guidelines Conventions

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.



    Line length Conventions

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

Print Page