Javascript best practices

Who can save us from this
trouble?

Write CODE for
other
Best practices is ZEN of
coding

JavaScript !== JAVA
JavaScript === ECMAScript

Naming Conventions

Type Good Examples
Variables registrationDate, calValue
Constants MAX_SIZE
Functions resizeWindow, modTags
Classes CM.view.createDoc.CreateDocumentPanel
Objects configProperty, mixin, campaignData
Filenames CreateDocumentPanel.js

i
Adding a double slash before the closing star-
slash allows you to comment and uncomment
the whole block by simply adding or removing a
slash before the opening slash-star.
/* */ instead of //
function(){
var me = this;
/*
function enable(x){
x.setDisabled(false);

COMMEN };
// */
};

T with

0 == ‘0’ true 0 === ‘0’ false
1 == ‘1’ true 1 === ‘1’ false
false == ‘0’ true false === ‘0’ false
‘ nnn’ == 0 true ‘ nnn’ === 0 false
‘ ‘ == 0 true ‘ ‘ === 0 false

USE Strict Comparison Operators
( === & !== )

function(data){ !
var localVar = data; //Correct : defines a local variable If you declare a variable, without using "var",
globalVar = data; // declares a global variable the variable always becomes GLOBAL.
}; Forgetting to declare a variable is a very
common mistake. It creates bugs that can be
very difficult to find.

USE single var dayArray = [‘Mon’, ‘Tue’, ‘Wed’]; var dayArray = [‘Mon’, ‘Tue’, ‘Wed’],
var dayArrayLength = dayArray.length; dayArrayLength = dayArray.length,
‘var’ instead of var dayOne = dayArray[0]; dayOne = dayArray[0];

many

AVOID using global
variables

USE „var‟

if (true) if (true){
UNCLEAR
console.log("inside the if statement.");
console.log("outside the if statement.");
console.log("inside the if statement.");
} console.log("outside the if statement.");

var localVar = new Object(); var localVar = new Object{
name : ‘manav’;
url : ‘http://about.me/manavg’;
SLOW };

var localVar = new Array(); var localVar = [‘manav’,’gaurav’];

USE Braces {}

Statements that are effect by automatic semicolon insertion

empty
var
expression return
do-while ’something’;
continue // is transformed to
break return;
return ’something’;
throw

Automatic ; (semicolon)

Current
break for throw
case function try
catch if typeof
continue in var
default instanceof void
delete new while
do return with
else switch
finally this

For Future
abstract final protected
boolean float public
byte goto short
char implements static
class import super
const int synchronized
debugger interface throws
double long transient
enum native volatile
export package
extends private

switch (color) {
case ‘blue’:
if (color === ‘blue’) { // do something here...
// do something here... break;
} else if (color === ‘green’) { case ‘green’:
// do something here... // do something here...
} else if (color === ‘yellow’) { break;
// do something here... case ‘yellow’:
} else if (color === ‘red’) { // do something here...
// do something here... break;
} else { case ‘red’:
// do something here... // do something here...
} break;
default:
// do something here...

USE the “switch” to
}

Handle Multiple
Conditions

DON‟T Change a
Variable‟s Type After
Initial Declaration
var value = ‚One Hundred";
value = 100;

Not all change is good

Optimize
loops What could
be faster?
var names = ['Red','Blue','Green',‘Yellow'];
for(var i=0;i<names.length;i++){
meshColor (names[i], names[i-1]);
}

Better
var all = names.length;
for(var i=0;i<all;i++){
meshColor(names[i], names[i-1]);
}

for(var i=0,j=names.length;i<j;i++){
meshColor (names[i], names[i-1]);
}

USE Object Literals
as
Configuration
Objects
Ext.create({
Object literals are objects xtype: ‚textfield‛,
name: ‛firstName‛,
defined using braces {} that label: ‚First Name‛,
contain a set of comma allowBlank: false,
readOnly: false,
separated key-value pairs much minLength: 10
});
like a map in Java.

Value Type
0 Number
NaN Number
‘’ String
false Boolean
null Object
undefined Undefined

The Falsy Values of
Javascript

USE ‘.’ & [] notations
wisely
var x = obj[‘x’]; var x = obj.x;
var x = obj[x];

[] notation provides
dot notation is faster
flexibility but is expensive

1. If a property is visible externally or is mixed with external properties than use
square brackets
2. If a property is internal only to the project then use dot
3. If you're using a lot of square brackets think about binding it to a function

Thank you & HAPPY
Coding
break;

Javascript best practices

More Related Content

What's hot (20)

Similar to Javascript best practices (20)

Javascript best practices