javascript best practise

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 == undefined) { 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.jsvar 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

http://slideshare.net/nainglinaung91

http://linkedin.com/in/nainglinaung

https://twitter.com/kelvinm0rRis

https://github.com/nainglinaung

javascript best practise

Documents