JavaScript | Style Guide and Coding Conventions

The JavaScript style guidelines are directions to regulate programming in javascript. These coding prescription are beneficiary to write code in javascript without any syntactical errors. It covers the naming of variables, direction to put whitespaces and semicolons and various statement guidelines. 
It also can improve the Quality, Readability & make code maintenance easier.

This article basically covers coding conventions like:

• Indentation
• Spaces, all brackets
• Variable declaration
• Object guidelines
• CamelCasing for identifier names
• Loops and control statements
• Statement guidelines
• Constructor
• Comments

1. Indentation:

We always indent our code using two spaces & our code must not end with trailing whitespaces. 

Javascript

function xyz{
  something();
}

2. Spaces, all brackets:

Blank spaces should always be used in the following circumstances: 

• A keyword followed by ‘(‘ or ‘)’ must provide whitespaces before and after it.
  if (condition) {
• All keywords like ‘function’, ‘typeof’ etc needs extra attention for whitespaces & a space provided after it. 

Javascript

let integer = function (
    value,
    default_value
) {
    value = resolve(value);
    return (10*value);
};

3. Variable declaration:

All variables must be declared with var before they are used. we mostly declare the variable at the beginning of the function. 
All names start with a letter. 

Javascript

NAME = "GFG";
Fullform = "GeeksforGeeks";
Rate = 19.90;
Hate = 0.20;
Ranking = Rate + (Rate / Hate);

4. Object guidelines :

General rules for object definitions: 
There are various types of objects in javascript as array, function, dates, user define objects. 
Basically, every object follows a simple coding style written below. 
In Javascript, we put an equal(=) & opening bracket after declaring the name of the object. We define property as using a colon: and put string values inside quotes “xyz” but not on numeric value. We put a semicolon at the end of one property and do not put at the end of last property.

Javascript

var platform = {
  firstName: "GEEKS",
  lastName: "GEEKS",
  Color: "GREEN"
};
//some are compressed can be written as
var platform = {firstName:"GEEKS", lastName:"GEEKS", Color:"GREEN"};

5. Camel casing for identifier names:

We mostly use camelcase for the identifier. In camel casing, the first letter of each function should be lowercase and the first letter of subsequent words should be capitalized. Example 

Javascript

function myFunction(a, b) {
  return a * b;
}

There should not be underscores between the words. 
If you use a mix of upper and lower case, you have to be extremely consistent & careful.

6. Loops and Control Structures:

We use same convention of parenthesis & brackets for control structures as discussed below 

• Always follow whitespace after an identifier of control statements. 
• Always provide whitespace & linebreak after the ; semicolon. 
• Always provide a whitespace after every, coma . 

example given below :-

Javascript

if (condition1 || condition2) {
  action1();
}
else if (condition3 && condition4) {
  action2();
}
else {
  defaultAction();
}

7. Statement Guidelines:

• Simple statement:
  The statement which consists only single line Always end with a semicolon.
• Compound statement:
  In javascript, we put the space & opening bracket { and have a list of statements with closing bracket } at the end. 
  for ex:- at the end of function name declaration before defining it. 
  We put the closing bracket on a new line without following whitespace trail. 
  We do not put the semicolon at the end of these type of statements.
• Multiline statements:
  In javascript Whenever a statement is not small enough to fit on one line, 
  line breaks must occur after an operator. 
  To improves readability lines should break into multiple lines.

Javascript

//simple statement
var gfg = ["Geeks", "For", "Geeks"];

//compound statement
for (i = 0; i < 5; i++) {
  a += i;
}
//multiline statement
if (
  a === 123
  && b === 'abc'
) {

8. Constructor:

In javascript, Constructors are used in form of function with new keyword. 
The newprefix creates a new object and binds that object to the function’s implied this parameter. 
Constructor functions MUST be given names with an initial uppercase character. 

Javascript

function GeeksforGeeks(node) {}

var geeksforgeeks= new GeeksforGeeks(element);

9. Comments: 

Use line comments, not block comments. The comments should start at the left margin. 
Use ‘//’ in start of comments. 

Javascript

// Set i to zero.

    i = 0;