Ten useful JavaScript tips & best practices

Ten Useful
JavaScript
Tips & Best Practices

I Am
Ankit Rastogi
a passionate Learner
Website : http://ankitrastogi.com

Stages of Learning
Shuhari - first learn, then detach, and
finally transcend
Shu - “Obey”
ha - “Detach”
ri - “Separate”

1
Method Chaining
It is a technique for calling multiple functions on the
same object consecutively.
new Employee()
.setName("Ankit")
.setDesignation("Consultant")
.setDepartment("Engineering")
.save();

2
Event Delegation
Allows you to avoid adding event listeners to specific
nodes; instead, the event listener is added to one
parent.
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
. . .
<li id="post-5oo">Item 500</li>
</ul>

3
Debounce
Postpone the passed function execution until after
wait milliseconds have elapsed since the last time it
was invoked.
var lazyLayout = debounce(250, function() {
// This code gets executed after
// 250 ms have passed since the last
// invoked time
});
$(window).resize(lazyLayout);

4
Throttle
Call the original function at most once per every wait
milliseconds.
var scrollHandler = throttle(250, function() {
// This code gets executed after
// 250 ms have passed.
});
$(window).scroll(scrollHandler);

5
Method Queue Pattern
Popularized by Google Analytics tracking code.
Also known as asynchronous function queuing.
// onClick event is tracked by google analytics
<a href="#" onClick="_gaq.push(['_trackEvent',
'Videos', 'Play', 'Description of Video']);"
>Play</a>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type =
'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https:
//ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.
parentNode.insertBefore(ga, s);
})();

// get the existing _gaq array
var _old_gaq = window._gaq;
// create a new _gaq object
window._gaq = new GoogleAnalyticsQueue();
// execute all of the queued up events - apply() turns
// the array entries into individual arguments
window._gaq.push.apply(window._gaq, _old_gaq);
2

6
Plus Operator
Convert anything to a number.
// Quick hex to dec conversion:
+"0xFF"; // -> 255
// Get a timestamp for now, the equivalent of `new
Date().getTime()`:
+new Date();
// for shortening something like if (someVar ===
null) someVar = 0;
+null; // -> 0;

// Safer parsing than parseFloat()/parseInt()
parseInt("1,000"); // -> 1, not 1000
+"1,000"; // -> NaN, much better for testing user input
parseInt("010"); // -> 8, because of the octal literal prefix
+"010"; // -> 10, `Number()` doesn't parse octal
literals
2
// Boolean to integer
+true; // -> 1;
+false; // -> 0;
// Other useful tidbits:
+"1e10"; // -> 10000000000
+"1e-4"; // -> 0.0001
+"-12"; // -> -12

var rnd = {
"valueOf":
function () { return Math.floor(Math.random()*1000); }
2
};
+rnd; // -> 442;
+rnd; // -> 727;
+rnd; // -> 718;

7
Shorten Scope Chains
Global Namespace is crowded.
Javascript Look Up first in local than global.
Use local variables to cache global one.
var a = function(){
var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');
}

2
var aGlobalVar = 1;
function doSomething(val) {
var i = 1000, agv = aGlobalVar;
while (i--) {
agv += val;
};
aGlobalVar = agv;
};
doSomething(10);

8
Memoization
It is a programming technique which attempts to
increase a function’s performance by caching its
previously computed results.
var costlyOperation = function(a){
// Time consuming operations
};
memoizedOperation = memoize(costlyOperation);
memoizedOperation(a);

9
Lazy JS Parsing
Minimizing JavaScript parse time.
Increase performance especially in mobile.
<html>
...
<script id="lazy">
/*
JavaScript of lazy module
*/
</script>

Identify the problem?
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}

function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
2
anchors[i].className = anchorClass;
}
insertFunction();
}
Solution

Identify the problem?
function addAnchors(element) {
var anchor;
for (var i = 0; i < 10; i ++) {
anchor = document.createElement('a');
anchor.innerHTML = 'test';
element.appendChild(anchor);
}
}

function addAnchors(element) {
var anchor, fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i ++) {
2
anchor = document.createElement('a');
anchor.innerHTML = 'test';
fragment.appendChild(anchor);
}
element.appendChild(fragment);
}
Solution

2
Identify the problem
baz.Bar = function() {
// constructor body
this.foo = function() {
// method body
};
}

2
baz.Bar = function() {
// constructor body
}
baz.Bar.prototype.foo = function() {
// method body
};
Solution

2
foo.Bar = function() {
this.prop1_ = 4;
this.prop2_ = true;
this.prop3_ = [];
this.prop4_ = 'blah';
};

2
Solution
foo.Bar = function() {
this.prop3_ = [];
};
foo.Bar.prototype.prop1_ = 4;
foo.Bar.prototype.prop2_ = true;
foo.Bar.prototype.prop4_ = 'blah';

2
function setupAlertTimeout() {
var msg = 'Message to alert';
window.setTimeout(function() {
alert(msg);
}, 100);
}

2
window.setTimeout(function() {
alert(msg);
}, 100);
}
Solution?

2
function alertMsg() {
alert(msg);
}
window.setTimeout(alertMsg, 100);
}
Solution

2
var divs = document.getElementsByTagName('div');
for (var i=0; i < divs.length; i++ ) {
var div = document.createElement("div");
document.appendChild(div);
}

2var divs = array( document.getElementsByTagName('div')
);
for (var i=0; i < divs.length; i++ ) {
var div = document.createElement("div");
document.appendChild(div);
}
Solution

Cache Factory
var cache = $cacheFactory('cacheId');
expect($cacheFactory.get('cacheId')).toBe(cache);
expect($cacheFactory.get('noSuchCacheId')).not.toBeDefined();
2
cache.put("key", "value");
cache.put("another key", "another value");
// We've specified no options on creation
expect(cache.info()).toEqual({id: 'cacheId', size: 2});

ng-repeat with track by
<ul class="tasks">
<li ng-repeat="task in tasks" ng-class="{done: task.
2
done}">
{{task.id}}: {{task.title}}
</li>
</ul>
$scope.tasks = newTasksFromTheServer;

ng-repeat with track by
2 ng-repeat="task in tasks track by task.id"

$parse, $interpolate, $compile
2 var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'
$scope.name = 'image';
$scope.extension = 'jpg';

$parse, $interpolate, $compile
$parse is concerned with individual expressions only (name, extension).
It is a read-write service.
2
$interpolate is read only and is concerned with strings containing
multiple expressions (/path/{{name}}.{{extension}})
$compile is at the heart of AngularJS machinery and can turn HTML
strings (with directives and interpolation expressions) into live DOM.

References :
● http://davidwalsh.name/event-delegate
● http://underscorejs.org/
● http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/
● http://mrcoles.com/blog/google-analytics-asynchronous-tracking-how-it-work/
● http://stackoverflow.com/questions/61088/hidden-features-of-javascript
● http://archive.devwebpro.com/devwebpro-39-20030514OptimizingJavaScriptforExecutionSpeed.html
● http://www.sitepoint.com/implementing-memoization-in-javascript/
● http://googlecode.blogspot.in/2009/09/gmail-for-mobile-html5-series-reducing.html
● https://developers.google.com/speed/articles/javascript-dom
● http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
● https://developers.google.com/speed/articles/optimizing-javascript
● https://docs.angularjs.org/api/ng/service/$cacheFactory
● http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
● http://stackoverflow.com/questions/17900588/what-is-the-difference-between-the-parse-interpolate-and-compile-
services

Ten useful JavaScript tips & best practices

Ten useful JavaScript tips & best practices

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Ten useful JavaScript tips & best practices

Similar to Ten useful JavaScript tips & best practices (20)

Recently uploaded

Recently uploaded (20)

Ten useful JavaScript tips & best practices