Introduction to Underscore.js Library. MVC and Templating Framework.

1. Introduction to Underscore.js
By Jitendra Zaa
http://JitendraZaa.com

2. Why do I need one more Library ?
• For DOM, JQuery is Awesome. But what if you are dealing with non
DOM operations and requirements like MVC or templating ?
• Lots of functions available for Collections. (Which is not supported by
Native Javascript or JQuery)
• Client Side Templating.
• Supports MVC programming model.
• Only in 4KB , Your life will become a lot easier.

3. Getting Started
• Underscore requires JQuery library as a prerequisite.
• You can get Underscore.js from here :
http://documentcloud.github.com/underscore/docs/underscore.htm
l
• Underscore creates and exposes all its functionality via a single
object, in global scope. This object is the titular underscore
character, _.

4. Example
Lets assume, we have array of key value pair (Map) in JavaScript like
var compKeyVal = [
{company : 'Salesforce', Founder : 'Marc Benioff'},
{company : 'Apple', Founder : 'steve jobs'},
{company : 'Oracle', Founder : 'Larry Ellison'}
];
Requirement : Get Array which will contain name of Founders Only from
above Key Value Pair. It is so simple as writing only one Line
var Founders = _.pluck (compKeyVal, 'Founder');

5. Functional or Object Oriented ?
Few Programmers are not comfortable with Functional way and may
argue that Object Oriented way of coding is more straight forward.
Same example of last slide can be re-written in more Object Oriented
way as :
var Founders = _(compKeyVal).pluck ('Founder');
Which one is better ?
There is no real “right” way, Its all up to you.

6. Collections Method

7. Collection
• Array of String, Object or Key-value considered as a collection.
Example :
• [0,4,5,6,7]
• [“StringB”,” StringA”,” StringD”,” StringE”,” StringG”]
• [obj1,obj2,obj3]
• [{Key : Val, Key1 : Val1}, {Key : Val, Key1 : Val1}]

8. Sample Array
• Throughout the slides we will use below collection to test different
methods of Underscore.js. This is array of Key value Pairs.
var compKeyVal = [
{company : 'Salesforce', Founder : 'Marc Benioff‘, year :
1999},
{company : 'Apple', Founder : 'steve jobs', year : 1976},
{company : 'Oracle', Founder : 'Larry Ellison', year : 1977}
];

9. Select
• This function is used to Select subset of collection.
• Example : Get all values which are founded after 1980.
var ans = _(compKeyVal).select(function(compKey){ return
compKey.year > 1980; });
console.log(ans[0]);
Output :
Object {company: "Salesforce", Founder: "Marc Benioff", year: 1999}

10. Pluck
This method extracts simple one dimensional array from collection with
specified property.
Requirement : Get Array which will contain name of “Founders” Only from
above collection. It is so simple as writing only one Line
var Founders = _.pluck (compKeyVal, 'Founder');
console.log(Founders);
Output :
["Marc Benioff", "steve jobs", " Larry Ellison"]

11. Map
• Creates array from collection Where each element of resultant array
changed through function.
Example :
var incNames = _(compKeyVal).pluck('company').map(function
(value){return value + '.Inc'});
console.log(incNames);
Output:
["Salesforce.Inc", "Apple.Inc", "Oracle.Inc"]

12. All
• Returns Either True or False, If every element in Array passed some
Criteria or Not ?
• Example : Return True if every element in array is greater than 1970.
var yearArray = _(compKeyVal).pluck('year');
var retVal = _(yearArray).all(function (value){return
value>1970; });
console.log(retVal);
Output : True

13. Arrays Method

14. Uniq
This Method removes Duplicate values from array.
var unVal =
_.uniq(['Shiva','Soft','Salesforce','Shiva','Soft','Salesforce'
,'Shiva','Soft','Salesforce','Shiva','Soft','Salesforce']);
console.log(unVal);
Output : ["Shiva", "Soft", "Salesforce"]

15. Range
Used to create array with values between specified range.
Syntax :
_.range(Starting Number, Ending Number, Number to Increment);
Example :
var randVals = _.range(0, 100, 11);
console.log(randVals);
Output :
[0, 11, 22, 33, 44, 55, 66, 77, 88, 99]

16. Intersection
This method returns Common Elements between Arrays.
var arr1 = [1,2,3,4,5,6,7];
var arr2 = [1,3,6,9,10,11,45,67];
var arr3 = [1,6,697,180,131,405,617];
var common = _.intersection(arr1, arr2, arr3 );
console.log(common);
Output:
[1, 6]