Code Standards And Conventions For JavaScript Programmers

Although, coding standards and general conventions are important, but in tools like JavaScript, where concept of code validation and or compilation is very weak, these things become very important. Generally, conventions like naming conventions, commenting and code indention may not give any benefit in performance (these will make your code easy to understand and easy to maintain), but coding standards can make a lot of difference.

I may recommend to review my previous article tips for JavaScript Programmers, from there you can find few important good practices to standardize JavaScript code.

Important Points

• JavaScript is case sensitive.
• Avoid special character in names. Dollar sign and underscore are exceptional cases where required.
• Generally use camel case.
• It is better to use complete descriptive name instead of abbreviations, except industry well know abbreviations and acronyms. Index variable like in for are also be an exception.
• Use proper indention for coding, we generally use 4 character indention.
• If possible the try to make your function limited to visibility of your screen. So in general 25 lines are more than enough.
• Always consider minification and bundling.
• We may try to avoid data type dependent naming.
• We may try to use name similar to data provider. It is a debatable point as using names similar to data provide may cause security risk, but it will give you ease to maintain code.
• Always address JavaScript Injection or Cross Site Scripting (XSS).
• Use proper spacing between operators and operands.

File Name

If your application is going to be hosted on Linux environment then keep in mind file names are also case sensitive there. But it is not similar for Windows, in windows, file and directory names are not case sensitive. It is better to end JavaScript file to have .js extension.

Local Variable

We may prefer the following rules for local variables:

• Use singular name in camel case for local variable of primitive type.
  var topicLength = 10000;
• Use plural name in camel case for local variable of array and other collections.
  var coloNames = [“Red”, “Green”, “Blue”];

Global Variable

We may prefer the following rules for global variables:

• Use singular name in pascal case for local variable of primitive type.
  var TopicLength = 10000;
• Use plural name in pascal case for local variable of array and other collections.
  var ColoNames = [“Red”, “Green”, “Blue”];

Private Variable

We may prefer the following rules for private variables:

• Use singular name in camel case starting with underscore for private variable of primitive type.
  var _topicLength = 10000;
• Use plural name in camel case starting with underscore for private variable of array and other collections.
  var _coloNames = [“Red”, “Green”, “Blue”];

Public Function Name

For public functions, we may prefer to use camel case:

function sayHello(person)
{
    return‘ Hello’ + person;
}

Private Function Name

For private functions, we may prefer to use camel case starting with underscore:

function _sayHello(person)
{
    return‘ Hello’ + person;
}

Class Name

For classes, we may prefer to use constructor to create and initialize object (by the way, there is a good audience, whom are against new in JavaScript). We may prefer to use pascal case for class constructor name, but its variable may use camel case:

function Car(carName, carModle, carColor)
{
    this.name = carName;
    this.modle = carName;
    this.color = carName;

    function carData()
    {
        return this.name + ‘‘ +this.modle + ‘‘ +this.color;
    }
}
var myCar = new Car(‘Hona’, ‘City’, ‘Blue’);
alert(myCar.carData());

Module Name

For modules, we may prefer to use pascal case:

var Config = (function()
{
    var baePath = ‘’;
    var _getPath = function()
    {
        return _basePath;
    };
    var _setPath = function(basePath)
    {
        _basePath = basePath;
    };
    return {
        getPath: _getPath,
        setPath: _setPath
    };
})();

if Statement

It is better to avoid single line if. I always recommend to use parenthesis with if and else part even there is single statement.

if (condition)
{
    //do your action
}

Loop Statement

It is better to avoid single line loop. I always recommend to use parenthesis with for even there is single statement.

for (var i = 0; i <= 10; i++)
{
    //do your action
}

Single Quotation or Double Quotation for String Values

There is no difference either you use single quotation or double quotations to represent a string. Even you can use both in a program, but it is recommended to use only one of them in a project. I personally recommend to use single quotation.

JavaScript Code Placement

Please consider the following recommendations for JavaScript placement in project:

 

• It is always recommended to avoid inline JavaScript coding. Please consider placing JavaScript code in separate file/s. For file naming we may use camel case: viewName.js, controllerName.js, libraryName.js and etc.
• It is better to place script reference and or code at bottom of HTML.
• It is must to address JavaScript file caching at browser side.

return Statement

Make sure return statement and expression are on same line and end with semicolon.

Comment

For comments we may consider the following:

• Always comment your code, particularly functions and complex scenarios.
• It is better to use single line comments using // instead of block comment syntax using /* … */.
• It is better to comment before code.
• It is better to end comment with full stop.