Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript Best
Practices
Code safe, Code fast
if (type == ‘student’) {
access = true;
} else {
access = false;
}
Ordinary Javascript Code
if (isTrue == true) {
doRightT...
Function call Using Ternary Operator
(access == ‘student’) ? alert(“he’s student”) : alert(“outsider”);
(access == ‘studen...
Using Logical Operator in assignment
function(num) {
num = num || “default”;
}
Using OR
function(num) {
if(num == undefined...
function(status) {
if (status ==true) {
status =false;
} else {
status = true;
}
}
Switch on / Switch off
Using NOT
functi...
var user = [
name : "Arkar",
children: [ "Hla Hla","Mya Mya","Aung Aung","Tun Tun”],
wife : "Phyo Phyo",
parents: ["U U ",...
for (var i=0; i<user.children.length; i++) {

console.log(user.children[i]);
}
inside Loop
- access user object
- access c...
var children = user.children;
for (var i=0; i<children.length; i++) {

console.log(children[i]);
}
- access user object
- ...
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]);
}
- ...
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 =...
Avoid with
with(user){
var wife = getwife(); // Phyo Phyo
console.log(children); //"Hla Hla","Mya Mya","Aung Aung","Tun Tu...
// Global Scope
var getNewWife = function() {
this.wife = “Zune Thinzar”;
};
But end up as Global Scope
Unlucky Arkar, Sor...
Javascript Number
Use toFixed()
Script.js
var list = user.getwife();
function getChildren(user) {
var list = user.children;
list.forEach(function(child){
...
Namespace
var script1 = {
list: user.getwife(),
doChore : function() {
for (var i of this.list) {
console.log(this.list[i]...
The End
- slideshare.net/nainglinaung91
- linkedin.com/in/nainglinaung
- https://twitter.com/kelvinm0rRis
- https://github...
Upcoming SlideShare
Loading in …5
×

Javascript Best Practice

709 views

Published on

Some Best practise in Javascript

Published in: Technology
  • Be the first to comment

Javascript Best Practice

  1. 1. Javascript Best Practices Code safe, Code fast
  2. 2. if (type == ‘student’) { access = true; } else { access = false; } Ordinary Javascript Code if (isTrue == true) { doRightThing(); } else { cleanYourMess(); }
  3. 3. 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;
  4. 4. Using Logical Operator in assignment function(num) { num = num || “default”; } Using OR function(num) { if(num == undefined) { num = “default”; } } default argument
  5. 5. function(status) { if (status ==true) { status =false; } else { status = true; } } Switch on / Switch off Using NOT function(status) { status = !status; }
  6. 6. 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; } ]; Sample Object for (var i=0; i<user.children.length; i++) {
 console.log(user.children[i]); } loop for children
  7. 7. 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
  8. 8. 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
  9. 9. Before Optimisation After Optimisation 4 Count 29 24 10 (7x+1) (5x+4) 71 54 100 701 504 1000 7001 5004
  10. 10. 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
  11. 11. 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
  12. 12. Case A Case B Case C
  13. 13. 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
  14. 14. 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
  15. 15. // 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”
  16. 16. Javascript Number Use toFixed()
  17. 17. 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
  18. 18. 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
  19. 19. 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

×