JavaScript Coding Guidelines

Documentation comments for files should looks like:
/**
 * @description       Description of the file.
 * @subdescription Some subdescription what the file contains.
 * @package           Name of the mainpackage.
 * @version            Version of the packages/subpackages.
 * @subpackage     Name of the subpackages.
 * @author             Name of the Author <mail>.
 * @copyright         Year, Name of the copyright holder.
 * @license             Name of the License.
 */

Documentation comments for functions should looks like:
/*!
 * @functionname functionname
 * @description     The description what the function does.
 * @param1 type  The parameter of the function.
 * @return type    What will be returned.
 */

Reason: If you have a structure like you see above, a parser can create documenations.
The parser will readout these placeholders and create an HTML-document.


Use the "use strict” string, to keep your code right and clean.
If a browser breaks because of some part of the code, then you should write it better.
Reason: http://javascriptweblog.wordpress.com/2011/05/03/javascript-strict-mode/ (Clean code reason.)


Avoid global variables.
Reason: http://sharjes.de/javascript-performance-globale-variablen-vermeiden/ (Performance reason.)


Use correct variable/function/object identifier.
Your names should looks like the examples below. Understandable names, camelCaseNames, not to short, not to long.
Reason: A well named variable/function/object is more readable because you have a clue as to what it means. (Clean code reason)

wrong:
var a = 2;
var f = function() …
var o = {
};
var ThisIsMyCounterVariable = 2;

right:
var counterVar = 2;
var toBool = function() …
var personObj = {
};


Use shortend assigments.
Reason: http://sharjes.de/javascript-performance-objekte/ (Performance reason.)

wrong:
var obj = new Object();
var arr = new Array();

Right:
var obj = {};
var arr = [];


One-Line-Comments should looks like:
// After the slashes is a space, line begins with a capital letter and ends with a period.


Multi-Line-Comments should looks like:
/*
 * All asterisk-symbols form a new line.
 * After the asterisk-symbol should be a space.
 * Lines begin with a capital letter and ends with a period.
 * If the line is too long, then it ends with a plus+
 * and the letter on the next line starts with a lower case letter.
 */

Reason: Clearer and more readable. Some parsers show it as a tip.
Tip: You can write /** / SourceCode /**/ (Single-line- and Multi-line-comment support) to quickly comment/uncomment code. A space between * and / will comment out your code. You can quickly comment/uncomment it when you make a space or delete the space.


Always use the “var” keyword!
Makes a clean code and avoids false results.
Reason: http://bustingseams.blogspot.com/2009/08/another-javascript-pitfall-hoisting.html http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/
(Scope, hoisting, performance and clean code reason)

Wrong:
function foo()
{

}
myVar = 2;

Right:
var foo = function()
{

};
var myVar = 2;


Avoid spaces as you can see below.
Reason: More readable.

Wrong:
function ( arg1, arg2, … )
for ( var i = 0; ... )
for ( var item in collection )
if ( !foo )

Right:
function(arg1, arg2, …)
for(var i = 0; ...)
for(var item in collection)
if(!foo)


Set open brackets in a new line, except with javascript objects.
Reason: Better readable.

Wrong:
var foo = function(){
};

if(true){

}

var obj =
{
   foo: ""
};

// Doesnt work correctly, because return is the end and no code after return will be executed.
return
{
   init: init
}

Right:
var foo = function()
{

};

if(true)
{

}

var obj = {
   foo: ""
}

return {
   init: init
}


Use always 3 spaces.
Reason: More readable.

Wrong:
var foo = function()
{
alert(123);
};

if(true)
{
alert(123);
}

Right:
var foo = function()
{
   alert(123);
};

if(true)
{
   alert(123);
}


Use shortend ifs as you can:
Reason: More readable.

return (foo === null) ? "foo is null" : foo; // Only an example.


Use identity/not identity operator (=== / !==)
instead of equal/not equal operator (== / !=)

Reason: http://longgoldenears.blogspot.com/2007/09/triple-equals-in-javascript.html (Performance reason.)
If you check a boolean variable for true or false, use the shortend version:
Reason: More readable.

Wrong:
if( myVar == true) …
if(myVar === true) …
if(myVar != true) …

Right:
if(myVar) // True.
if(!myVar) // False.

Always use semicolons after closing brackets of a function!
One more is better than forget some, a minifier will delete this!