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 director names are not case
sensitive. It is better to end JavaScript file to have .js extension.
Local Variable
We may prefer 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 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 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;
}
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;
}
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 us 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 Car(carName, carModle, carColor){
this.name = carName;
this.modle = carName;
this.color = carName;
function carData(){
return this.name + ‘ ‘ + this.modle + ‘ ‘+ this.color;
}
}
return this.name + ‘ ‘ + this.modle + ‘ ‘+ this.color;
}
}
var myCar = new Car(‘Hona’, ‘City’, ‘Blue’);
alert(myCar. carData ());
alert(myCar. carData ());
Module Name
For modules, we may prefer to use pascal case:
var Config = (function(){
var baePath = ‘’;
var Config = (function(){
var baePath = ‘’;
var _getPath = function(){
return _basePath;
};
var _setPath = function(basePath){
_basePath = basePath;
};
return{
getPath: _getPath,
setPath: _setPath
};
})();
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
}
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
}
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 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 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.
