Javascript Best Practices

Javascript Best Practices Code safe, Code fast

if (type == ‘student’) { access = true; } else
{ access = false; } Ordinary Javascript Code if (isTrue == true) { doRightThing(); } else { cleanYourMess(); }

Function call Using Ternary Operator (access == ‘student’) ? alert(“he’s
student”) : alert(“outsider”); (access == ‘student’) ? ( count++, alert(‘hi’)) : ( noAccess(), alert(‘no’)); Multiple Expression Using Ternary Operator access = (type == ‘student’) ? true : false;

Using Logical Operator in assignment function(num) { num = num
|| “default”; } Using OR function(num) { if(num == undeﬁned) { num = “default”; } } default argument

function(status) { if (status ==true) { status =false; } else
{ status = true; } } Switch on / Switch off Using NOT function(status) { status = !status; }

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]); } - access user object - access children property - assign children Outside Loop inside Loop - access children - access length; - access children; - access i of children - console.log Total result is 1 + 3 + 5 * 4 = 24

Before Optimisation After Optimisation 4 Count 29 24 10 (7x+1)
(5x+4) 71 54 100 701 504 1000 7001 5004

var children = user.children; var length = children.length; for (var
i=0; i<length; i++) {  console.log(children[i]); } - access user object - access children property - assign children - access children - access length - assign length Outside Loop inside Loop - access length - access children; - access i of children - console.log Total result is 1 + 6 + 4* 4 = 23

Case A Case B 4 Count 29 24 10 (7x+1)
(5x+4) 71 54 100 701 504 1000 7001 5004 23 (4x+7) 47 407 4007 Case C

Case A Case B Case C

Comparison Operator ‘4’ == 4 //true true == 1 //true
== === ‘4’ === 4 //false 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” } with(user){ var getNewWife = function() { this.wife = “Zune Thinzar”; }; }; If He want new wife

// Global Scope var getNewWife = function() { this.wife =
“Zune Thinzar”; }; But end up as Global Scope Unlucky Arkar, Sorry to hear that So, don’t try to cheat on “with”

Javascript Number Use toFixed()

Script.js var list = user.getwife(); function getChildren(user) { var list
= user.children; list.forEach(function(child){ console.log(child); }); } Script2.js <html> <head> <script src=“script.js”> <script src=“script2.js”> HTML

Namespace 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(){ /// } Script.js Script2.js

The End - slideshare.net/nainglinaung91 - linkedin.com/in/nainglinaung - https://twitter.com/kelvinm0rRis - https://github.com/nainglinaung
Naing Lin Aung is currently work as Programmer in Aceplus Solution. If you want to contact, you can check with the following links

Javascript Best Practices

Javascript Best Practices

Naing Lin Aung

More Decks by Naing Lin Aung

Other Decks in Programming

Featured

Transcript