You are on page 1of 19

Javascript Best

Practices
Code safe, Code fast

Ordinary Javascript Code


if (type == student) {
access = true;
} else {
access = false;
}

if (isTrue == true) {
doRightThing();
} else {
cleanYourMess();
}

Using Ternary Operator


access = (type == student) ? true : false;

Function call Using Ternary Operator


(access == student) ? alert(hes student) : alert(outsider);

Multiple Expression
(access == student) ? ( count++, alert(hi)) : ( noAccess(), alert(no));

Using Logical Operator in assignment


default argument
function(num) {
if(num == undefined) {
num = default;
}
}

Using OR
function(num) {
num = num || default;
}

Switch on / Switch off


function(status) {
if (status ==true) {
status =false;
} else {
status = true;
}
}

Using NOT
function(status) {
status = !status;
}

Sample Object
var user = [
name : "Arkar",
children: [ "Hla Hla","Mya Mya","Aung Aung","Tun Tun],
wife : "Phyo Phyo",
parents: ["U U ", "Daw Daw"]
getParent:function(){
return this.parent;
},
getwife:function(){
return this.wife;
}
];

loop for children


for (var i=0; i<user.children.length; i++) {
console.log(user.children[i]);
}

for (var i=0; i<user.children.length; i++) {


console.log(user.children[i]);
}

inside Loop
-

access user object


access children property
access length property
access user object
access children property
access children of i
execute console.log

Total result is 1 + 7 x 4 = 29

var children = user.children;


for (var i=0; i<children.length; i++) {
console.log(children[i]);
}

Outside Loop

inside Loop

access user object


access children property
assign children

Total result is 1 + 3 + 5 * 4 = 24

access children
access length;
access children;
access i of children
console.log

Count

Before Optimisation

After Optimisation

29

24

10

71

54

100

701

504

1000

7001

5004

(7x+1)

(5x+4)

var children = user.children;


var length = children.length;
for (var i=0; i<length; i++) {
console.log(children[i]);
}

Outside Loop

inside Loop

access user object


access children property
assign children
access children
access length
assign length

Total result is 1 + 6 + 4* 4 = 23

access length
access children;
access i of children
console.log

Count

Case A

Case B

Case C

29

24

23

10

71

54

47

100

701

504

407

1000

7001

5004

4007

(7x+1)

(5x+4)

(4x+7)

Case A
Case B
Case C

Comparison Operator
==

===

4 == 4

//true

4 === 4

//false

true == 1

//true

true === 1

//false

false == 0

//true

false === 0

//false

/n /t /n == 0 //true

/n /t /n === 0 //false

Avoid with
with(user){
var wife = getwife(); // Phyo Phyo
console.log(children); //"Hla Hla","Mya Mya","Aung Aung","Tun Tun
console.log(parent); // U U, Daw Daw
}

If He want new wife


with(user){
var getNewWife = function() {
this.wife = Zune Thinzar;
};
};

But end up as Global Scope

// Global Scope
var getNewWife = function() {
this.wife = Zune Thinzar;
};

Unlucky Arkar, Sorry to hear that


So, dont try to cheat on with

Javascript Number

Use toFixed()

Script.js
var list = user.getwife();

Script2.js
function getChildren(user) {
var list = user.children;
list.forEach(function(child){
console.log(child);
});
}

HTML
<html>
<head>
<script src=script.js>
<script src=script2.js>

Namespace

Script.js

Script2.js

var script1 = {
list: user.getwife(),
doChore : function() {
for (var i of this.list) {
console.log(this.list[i] + cleaning);
}
}.
deleteWife: function () {
delete this.list;
}

var script2 = {
list: user.children;
getChildren: function(user) {
this.list.forEach(function(child){
console.log(child);
});
},
cleanChildren:function(){
///
}

The End
Naing Lin Aung is currently work as Programmer in Aceplus Solution. If you want to
contact, you can check with the following links

slideshare.net/nainglinaung91
linkedin.com/in/nainglinaung
https://twitter.com/kelvinm0rRis
https://github.com/nainglinaung