Underscore.js is a JavaScript utility library designed to complement jQuery by providing unobtrusive and flexible functional support for handling collections, arrays, and functions without modifying built-in objects. It offers features like chaining and various utility functions that help improve the coding experience in JavaScript. The document includes examples and demonstrates how Underscore.js fills gaps in the JavaScript language.

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