ten groovy little javascript tips
DESCRIPTION
JavaScript, like it or not, has become the most important language on the web. Nearly every developer who builds Internet apps has to use it. But JavaScript can be tough to write and even tougher to read. So here are ten tips to help you get groovy with JavaScript.TRANSCRIPT
![Page 1: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/1.jpg)
Ten Groovy Little JavaScript TipsSo Cal Code Camp, July 28, 2013
Thursday, July 25, 13
![Page 2: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/2.jpg)
Who am I?Hi, I’m Troy. I have been developing software for over 30 years. For the last 10 years I have been focused on web, mobile web, and mobile development. I currently work at Kelley Blue Book as a senior software engineer. My opinions are my own.
I can be reached [email protected]
Thursday, July 25, 13
![Page 3: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/3.jpg)
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
Thursday, July 25, 13
![Page 4: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/4.jpg)
Please Rate This Talkhttp://spkr8.com/t/22971
Thursday, July 25, 13
![Page 5: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/5.jpg)
The Browser Wars
• ActionScript
• Java
• JavaScript
• JScript
• VBScript
Thursday, July 25, 13
![Page 6: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/6.jpg)
The browser wars are over.
Thursday, July 25, 13
![Page 7: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/7.jpg)
JavaScript won.
Thursday, July 25, 13
![Page 8: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/8.jpg)
Get used to it.
Thursday, July 25, 13
![Page 9: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/9.jpg)
Get better at it.
Thursday, July 25, 13
![Page 10: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/10.jpg)
Our Goal
To provide you with some simple to follow, easy to remember tips, which can improve your JavaScript.
Thursday, July 25, 13
![Page 11: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/11.jpg)
The Tips
• Code
• Conditionals
• Conversions
• jQuery
Thursday, July 25, 13
![Page 12: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/12.jpg)
Code
Thursday, July 25, 13
![Page 13: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/13.jpg)
Tip #1Use protection
Thursday, July 25, 13
![Page 14: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/14.jpg)
Use Protection
• The Browser is a very dirty environment
• Protect your code by wrapping it in a function
/* using protection */ (function (doc, win) { /* put all of your precious code here to keep it safe */ /* extra bonus, parameters passed in become local, minor performance boost */ }(document, window));
Thursday, July 25, 13
![Page 15: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/15.jpg)
Tip #2debugger is your friend
Thursday, July 25, 13
![Page 16: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/16.jpg)
debugger is your friend• At times it can be difficult to set a
breakpoint
• The debugger statement allows you to set a breakpoint any where you like
app.post("/clientadmin", function (req, res) { var clientId = req.body.client; console.log("/clientadmin POST: " + JSON.stringify(req.body)); if (clientId) { mongodb.getClientModel().findOne({_id: clientId }, function (err, client) { mongodb.getCampaignModel().find({clientId: clientId}, function (err, campaigns) { debugger; console.log("Campaigns: " + JSON.stringify(campaigns)); /* set the client id */ res.cookie('clientId', clientId); res.cookie('client', JSON.stringify(client)); res.render("clientadmin.hbs", {client: client, campaigns: campaigns, user: extractUser(res)}); }); }); } });
Thursday, July 25, 13
![Page 17: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/17.jpg)
Conditionals
Thursday, July 25, 13
![Page 18: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/18.jpg)
Tip #3Always Use ===
Thursday, July 25, 13
![Page 19: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/19.jpg)
Always Use ===
• Double equals (==) does automatic type conversion
• The results of this conversion is not logical or obvious
• Avoid this by using triple equals (===)
• There is no good reason to ever use ==
• Same goes for !=
Thursday, July 25, 13
![Page 20: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/20.jpg)
Tip #4Learn to love falsey
Thursday, July 25, 13
![Page 21: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/21.jpg)
Learn to Love Falsey
• When coming from C# or Java it is tempting to use C-like conditionals
• JavaScript conditionals can be more succinct and performant
1 /* C-style conditional */ 2 if (val != null && val.length > 0){ 3 ... 4 } 5 6 /* JavaScript style conditional */ 7 if (val) { 8 ... 9 }10
Thursday, July 25, 13
![Page 22: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/22.jpg)
Falsey
Type Results
Null FALSE
Undefined FALSE
Number if 0 or NaN, FALSE
String if length = 0, FALSE
Object TRUE
Thursday, July 25, 13
![Page 23: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/23.jpg)
Conversions
Thursday, July 25, 13
![Page 24: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/24.jpg)
JavaScript’s Conversion Shortcuts
• Default Value
• To Binary
• To Number
• To String
Thursday, July 25, 13
![Page 25: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/25.jpg)
Tip #5Getting default value
Thursday, July 25, 13
![Page 26: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/26.jpg)
Getting a default value
• At times it is nice to have a default value
• JavaScript has a kind of default value operator /* Conversions */ var defaultValue = defaultValue || 16; var defaultString = inputValue || “Here is the default value”; console.log(defaultValue);
Thursday, July 25, 13
![Page 27: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/27.jpg)
Tip #6Convert to boolean
Thursday, July 25, 13
![Page 28: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/28.jpg)
To Binary
• Double exclamation (!!) converts a value to its boolean representation (true/false)
/* convert to boolean */ var toBinary = !!null; console.log(toBinary);
Thursday, July 25, 13
![Page 29: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/29.jpg)
Tip #7Convert string to
number
Thursday, July 25, 13
![Page 30: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/30.jpg)
To Number
• The plus sign (+) before a numeric string converts it to a numeric value
/* convert to number */ var toNumber = +"42"; console.log(toNumber);
Thursday, July 25, 13
![Page 31: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/31.jpg)
Tip #8Convert value to string
Thursday, July 25, 13
![Page 32: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/32.jpg)
To String
• Add an empty string (“”) to a value converts it to a string
var toString = 42 + ""; console.log(toString);
Thursday, July 25, 13
![Page 33: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/33.jpg)
jQuery
Thursday, July 25, 13
![Page 34: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/34.jpg)
Thursday, July 25, 13
![Page 35: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/35.jpg)
Tip #9jQuery isn’t always the
answer
Thursday, July 25, 13
![Page 36: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/36.jpg)
jQuery Isn’t Always the Answer
• For many tasks plain JavaScript is better than jQuery
• For example, finding an element by its id, jQuery calls document.getElementById()
/* get element by Id is faster than... */ var el = document.getElementById("myDiv"); /* $('#myDiv'), which calls it */ var $el = $('#myDiv').eq(0);
Thursday, July 25, 13
![Page 37: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/37.jpg)
Tip #10Cache Selectors
Thursday, July 25, 13
![Page 38: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/38.jpg)
Cache Selectors
• jQuery Selectors are method calls, not operators
• The method calls interrogate the DOM
• Method calls are slow
• Interrogating the DOM is VERY slow
• Caching selectors can dramatically improve the speed of your code
Thursday, July 25, 13
![Page 39: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/39.jpg)
Cache Selectors/* jQuery Demo */ RocknCoder.plugInSlow = function() { var i, val; for(i=0; i < 50; i++) { val = $('#styleMe').html(); } } RocknCoder.plugInFast = function() { var i, val, $styleMe = $('#styleMe'); for(i=0; i < 50; i++) { val = $styleMe.html(); } }
Thursday, July 25, 13
![Page 40: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/40.jpg)
Bonus Tip #1Use
event.preventDefault
Thursday, July 25, 13
![Page 41: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/41.jpg)
Use event.preventDefault• If your code completely handles an event,
you should be sure to event.preventDefault
• This will stop unnecessary code from executing
$('#usRank').on('click', function(evt){ evt.preventDefault(); showChart('US Rank', filterUSRank); });
Thursday, July 25, 13
![Page 42: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/42.jpg)
Summary
• JavaScript is the most important language of web development
• But it is a quirky language
• Use these tips to speed up your code
• And make your JavaScript code groovier
Thursday, July 25, 13
![Page 43: Ten Groovy Little JavaScript Tips](https://reader036.vdocuments.us/reader036/viewer/2022081514/554bbc2bb4c90594278b4dda/html5/thumbnails/43.jpg)
Please Rate This Talkhttp://spkr8.com/t/22971
Thursday, July 25, 13