Ten Groovy Little JavaScript Tips

Ten Groovy Little
JavaScript Tips
So Cal Code Camp, July 28, 2013
Thursday, July 25, 13

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 rockncoder@gmail.com

The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder

Please RateThisTalk
http://spkr8.com/t/22971

The Browser Wars
• ActionScript
• Java
• JavaScript
• JScript
• VBScript

The browser wars are over.

JavaScript won.

Get used to it.

Get better at it.

Our Goal
To provide you with some simple to follow, easy to
remember tips, which can improve your JavaScript.

The Tips
• Code
• Conditionals
• Conversions
• jQuery

Tip #1
Use protection

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));

Tip #2
debugger is your friend

debugger is your friend
• At times it can be difﬁcult 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)});
});
});
}
});

Conditionals

Tip #3
Always Use ===

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 !=

Tip #4
Learn to love falsey

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

Falsey
Type Results
Null FALSE
Undeﬁned FALSE
Number if 0 or NaN, FALSE
String if length = 0, FALSE
Object TRUE

Conversions

JavaScript’s Conversion
Shortcuts
• DefaultValue
• To Binary
• To Number
• To String

Tip #5
Getting default value

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);

Tip #6
Convert to boolean

To Binary
• Double exclamation (!!) converts a value to
its boolean representation (true/false)
/* convert to boolean */
var toBinary = !!null;
console.log(toBinary);

Tip #7
Convert string to
number

To Number
• The plus sign (+) before a numeric string
converts it to a numeric value
/* convert to number */
var toNumber = +"42";
console.log(toNumber);

Tip #8
Convert value to string

To String
• Add an empty string (“”) to a value
converts it to a string
var toString = 42 + "";
console.log(toString);

Tip #9
jQuery isn’t always the
answer

jQuery Isn’t Always the
Answer
• For many tasks plain JavaScript is better
than jQuery
• For example, ﬁnding 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);

Tip #10
Cache Selectors

Cache Selectors
• jQuery Selectors are method calls, not
operators
• The method calls interrogate the DOM
• Method calls are slow
• Interrogating the DOM isVERY slow
• Caching selectors can dramatically improve
the speed of your code

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();
}
}

Bonus Tip #1
Use
event.preventDefault

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);
});

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

Ten Groovy Little JavaScript Tips

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Ten Groovy Little JavaScript Tips

Ähnlich wie Ten Groovy Little JavaScript Tips (20)

Mehr von Troy Miles

Mehr von Troy Miles (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Ten Groovy Little JavaScript Tips