This document provides an introduction and overview of the Underscore.js library. It discusses why Underscore.js is useful, especially for non-DOM operations like MVC and templating. It provides examples of how to get started with Underscore.js and demonstrates some of its core functions for working with collections and arrays, including pluck, select, map, all, uniq, range, and intersection.

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]