A quick overview of the Underscore.js utility javascript library. Presented 9/6/2011 to the San Diego JS meetup group.

1. Underscore.js
Unobtrusive Utilities for Javascript
Kevin Ball
Co-Founder & CTO
kball@fashioningchange.com
@kbal11

2. What is Underscore.js?

3. What is Underscore.js?
Javascript Utility Library

4. What is Underscore.js?
Javascript Utility Library
• Complementary

5. What is Underscore.js?
Javascript Utility Library
• Complementary
• Unobtrusive

6. What is Underscore.js?
Javascript Utility Library
• Complementary
• Unobtrusive
• Flexible

7. Complementary
jQuery

8. Complementary
jQuery

9. Complementary
jQuery Functional Support

10. Complementary
jQuery Functional Support
• Collections
• Arrays
• Functions

11. Unobtrusive

12. Unobtrusive
Plays nice with others

13. Unobtrusive
Plays nice with others
•Does not modify built-in
objects
•Delegates to built-in
functions if present

14. Flexible

15. Flexible
• Functional or
Object-oriented style
• Chainable

16. What Does It Do?
• Fills in holes in the language
• Provides functional support
• Makes you happier writing Javascript

17. Examples: Arrays
_.map([1, 2, 3], function(i) { return i * 2; });
_([1, 2, 3]).map(function(i) {return i * 2;});

18. Doesn’t jQuery have
$.map?

19. Doesn’t jQuery have
$.map?
_.map

20. Doesn’t jQuery have
$.map?
_.map _.each

21. Doesn’t jQuery have
$.map?
_.map _.each
_.reduce

22. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce

23. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce _.detect

24. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce _.detect
_.reject

25. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce _.detect
_.reject _.sortBy

26. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce _.detect
_.reject _.sortBy _.include

27. Doesn’t jQuery have
$.map?
_.map _.each _.select
_.reduce _.detect
_.reject _.sortBy _.include
_.groupBy

28. Chaining
• Use with object-oriented style
• Chain method tells Underscore to return
wrapped objects
• Value method returns the final value at the
end

29. Chaining
var lyrics = [
{line : 1, words : "I'm a lumberjack and I'm okay"},
{line : 2, words : "I sleep all night and I work all day"},
{line : 3, words : "He's a lumberjack and he's okay"},
{line : 4, words : "He sleeps all night and he works all day"}
];
_(lyrics).chain()
.map(function(line) { return line.words.split(' '); })
.flatten()
.reduce(function(counts, word) {
counts[word] = (counts[word] || 0) + 1;
return counts;
}, {}).value();
=> {lumberjack : 2, all : 4, night : 2 ... }
* Example from http://documentcloud.github.com/underscore/

30. Function Utilities

31. Function Utilities
_.bind(function, object)

32. Function Utilities
_.bind(function, object)
_.memoize(function, [hashFunction])

33. Function Utilities
_.bind(function, object)
_.memoize(function, [hashFunction])
_.throttle(function, wait)

34. Object Utilities

35. Object Utilities
_.isNumber(object)

36. Object Utilities
_.isNumber(object)
_.keys(object)

37. Object Utilities
_.isNumber(object)
_.keys(object)
_.isEqual(object, other)

38. Conclusion

39. Conclusion
Good libraries reduce the burden

40. Conclusion
Good libraries reduce the burden
Underscore.js

41. Thank You!
Kevin Ball
Co-Founder & CTO
kball@fashioningchange.com
@kbal11