Introduction to Underscore.js 
By Jitendra Zaa 
http://JitendraZaa.com
Why do I need one more Library ? 
• For DOM, JQuery is Awesome. But what if you are dealing with non 
DOM operations and r...
Getting Started 
• Underscore requires JQuery library as a prerequisite. 
• You can get Underscore.js from here : 
http://...
Example 
Lets assume, we have array of key value pair (Map) in JavaScript like 
var compKeyVal = [ 
{company : 'Salesforce...
Functional or Object Oriented ? 
Few Programmers are not comfortable with Functional way and may 
argue that Object Orient...
Collections Method
Collection 
• Array of String, Object or Key-value considered as a collection. 
Example : 
• [0,4,5,6,7] 
• [“StringB”,” S...
Sample Array 
• Throughout the slides we will use below collection to test different 
methods of Underscore.js. This is ar...
Select 
• This function is used to Select subset of collection. 
• Example : Get all values which are founded after 1980. ...
Pluck 
This method extracts simple one dimensional array from collection with 
specified property. 
Requirement : Get Arra...
Map 
• Creates array from collection Where each element of resultant array 
changed through function. 
Example : 
var incN...
All 
• Returns Either True or False, If every element in Array passed some 
Criteria or Not ? 
• Example : Return True if ...
Arrays Method
Uniq 
This Method removes Duplicate values from array. 
var unVal = 
_.uniq(['Shiva','Soft','Salesforce','Shiva','Soft','S...
Range 
Used to create array with values between specified range. 
Syntax : 
_.range(Starting Number, Ending Number, Number...
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,...
Upcoming SlideShare
Loading in …5
×

Introduction to underscore.js

718 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
718
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to underscore.js

  1. 1. Introduction to Underscore.js By Jitendra Zaa http://JitendraZaa.com
  2. 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. 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. 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. 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. 6. Collections Method
  7. 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. 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. 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. 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. 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. 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. 13. Arrays Method
  14. 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. 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. 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]

×