Code Standards And Conventions For JavaScript Programmers

Introduction

 

Although coding standards and general conventions are important, in tools like JavaScript, where the 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 reviewing my previous article tips for JavaScript Programmers, from there you can find a few important good practices to standardize JavaScript code.

Important Points

• JavaScript is case sensitive.
• Avoid special characters in names. The dollar sign and underscore are exceptional cases where required.
• Generally, use camel case.
• It is better to use a complete descriptive name instead of abbreviations, except the industry well knows abbreviations and acronyms. Index variables like in for are also an exception.
• Use proper indention for coding, we generally use 4 character indention.
• If possible the try to make your function limited to the 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 the name similar to data providers. It is a debatable point as using names similar to data provide may cause a 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 the 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 the JavaScript file to have a .js extension.

Local Variable

We may prefer the following rules for local variables:

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

Global Variable

We may prefer the following rules for global variables:

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

Private Variable

We may prefer the following rules for private variables:

• Use a singular name in camel case starting with an underscore for the private variable of primitive type.
  var _topicLength = 10000;
• Use a plural name in the camel case starting with an underscore for the private variable of the 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 an 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 a single line if. I always recommend using parenthesis with if and else part even there is a single statement.

if (condition)
{
    //do your action
}

Loop Statement

It is better to avoid a single line loop. I always recommend using parenthesis with for even there is a 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 a 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 using a single quotation.

JavaScript Code Placement

Please consider the following recommendations for JavaScript placement in the 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 the camel case: viewName.js, controllerName.js, libraryName.js and etc.
• It is better to place script reference and or code at the bottom of HTML.
• It is a must to address JavaScript file caching at the browser side.

return Statement

Make sure the return statement and expression are on the same line and end with a 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 the code.
• It is better to end the comment with a full stop.