Underscore.js - Overview of functions, Part II: Functions, Objects, and Utilities

Transcript

1. Underscore.js Overview of functions Part II: Functions, Objects, and Utilities Marcin Tabaka June 30, 2015
2. Outline Part I: • Introduction • Collections • Arrays Part II: • Functions • Objects • Utilities • Summary
3. Functions
4. Function Functions (yeah, I know) after once before partial bind throttle bindAll wrap compose debounce defer delay memoize negate
5. bind Underscore.js docs: Bind a function to an object, meaning that whenever the function is called, the value of this will be the object. Optionally, pass arguments to the function to pre-fill them, also known as partial application. For partial application without context binding, use partial.
6. bind var func = function (label) { return label + ': ' + this.number; }; func = _.bind(func, { number: 42 }, 'ID'); func();
7. bind var func = function (label) { return label + ': ' + this.number; }; func = _.bind(func, { number: 42 }, 'ID'); func(); // => 'ID: 42'
8. bindAll Underscore.js docs: Binds a number of methods on the object, specified by methodNames, to be run in the context of that object whenever they are invoked. Very handy for binding functions that are going to be used as event handlers, which would otherwise be invoked with a fairly useless this. methodNames are required.
9. bindAll var inputView = { label: 'Name', change: function () { console.log(this.label + ' changed'); }, focus: function () { console.log(this.label + ' focused'); } }; _.bindAll(inputView, 'onChange', 'onFocus'); $('#name').bind('change', inputView.change);
10. partial Underscore.js docs: Partially apply a function by filling in any number of its arguments, without changing its dynamic this value. A close cousin of bind. You may pass _ in your list of arguments to specify an argument that should not be pre-filled, but left open to supply at call-time.
11. partial var url = function(host, path) { return 'http://' + host + '/' + path; }; twitterUrl = _.partial(url, 'twitter.com'); twitterUrl('sidnet_en');
12. partial var url = function(host, path) { return 'http://' + host + '/' + path; }; twitterUrl = _.partial(url, 'twitter.com'); twitterUrl('sidnet_en'); // => 'http://twitter.com/sidnet_en'
13. partial var url = function(host, path) { return 'http://' + host + '/' + path; }; twitterUrl = _.partial(url, 'twitter.com'); twitterUrl('sidnet_en'); // => 'http://twitter.com/sidnet_en' indexUrl = _.partial(url, _, 'index.html'); indexUrl('www.w3.org');
14. partial var url = function(host, path) { return 'http://' + host + '/' + path; }; twitterUrl = _.partial(url, 'twitter.com'); twitterUrl('sidnet_en'); // => 'http://twitter.com/sidnet_en' indexUrl = _.partial(url, _, 'index.html'); indexUrl('www.w3.org'); // => 'http://www.w3.org/index.html'
15. memoize Underscore.js docs: Memoizes a given function by caching the result. Useful for speeding up slow-running computations. If passed an optional hashFunction, it will be used to compute the hash key for storing the result, based on the arguments. The default hashFunction uses the first argument to the memoized function as the key.
16. memoize var fib = _.memoize(function(n) { return n < 2 ? n: fib(n-1) + fib(n-2); });
17. delay Underscore.js docs: Much like setTimeout, invokes function after wait milliseconds. If you pass the optional arguments, they will be forwarded on to the function when it is invoked.
18. delay _.delay(alert, 1000, 'One second passed!');
19. defer Underscore.js docs: Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0. Useful for performing expensive computations or HTML rendering in chunks without blocking the UI thread. If you pass the optional arguments, they will be forwarded on to the function when it is invoked.
20. defer _.defer(function () { $("div.numerous").show(); }); // Returns before elements get shown
21. throttle Underscore.js docs: Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate- limiting events that occur faster than you can keep up with.
22. throttle var throttled = _.throttle(redraw, 100); $(window).scroll(throttled);
23. debounce Underscore.js docs: Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving.
24. debounce var lazyPreview = _.debounce(preview, 300); $(window).resize(lazyPreview);
25. once Underscore.js docs: Creates a version of the function that can only be called one time. Repeated calls to the modified function will have no effect, returning the value from the original call. Useful for initialization functions, instead of having to set a boolean flag and then check it later.
26. once var startup = _.once(createLayout); startup(); startup(); // Layout is only created once
27. after Underscore.js docs: Creates a version of the function that will only be run after first being called count times. Useful for grouping asynchronous responses, where you want to be sure that all the async calls have finished, before proceeding.
28. after var callMe = _.after(3, function () { return "Third time's the charm"; }); callMe(); callMe(); callMe();
29. after var callMe = _.after(3, function () { return "Third time's the charm"; }); callMe(); // => undefined callMe(); callMe();
30. after var callMe = _.after(3, function () { return "Third time's the charm"; }); callMe(); // => undefined callMe(); // => undefined callMe();
31. after var callMe = _.after(3, function () { return "Third time's the charm"; }); callMe(); // => undefined callMe(); // => undefined callMe(); // => "Third time's the charm"
32. after var updateItems = _.after( items.length, doUpdate ); _.each(items, function (item) { item.asyncSave().done(function () { // Will be only run once, after all // items are saved updateItems(); }); });
33. before Underscore.js docs: Creates a version of the function that can be called no more than count times. The result of the last function call is memoized and returned when count has been reached.
34. before var counter = 0; var callMeTwice = _.before(3, function () { return ++counter; }); callMeTwice(); callMeTwice(); callMeTwice();
35. before var counter = 0; var callMeTwice = _.before(3, function () { return ++counter; }); callMeTwice(); // => 1 callMeTwice(); callMeTwice();
36. before var counter = 0; var callMeTwice = _.before(3, function () { return ++counter; }); callMeTwice(); // => 1 callMeTwice(); // => 2 callMeTwice();
37. before var counter = 0; var callMeTwice = _.before(3, function () { return ++counter; }); callMeTwice(); // => 1 callMeTwice(); // => 2 callMeTwice(); // => 2 (memoized)
38. wrap Underscore.js docs: Wraps the first function inside of the wrapper function, passing it as the first argument. This allows the wrapper to execute code before and after the function runs, adjust the arguments, and execute it conditionally.
39. wrap var hello = function(name) { return "Hello " + name; }; var helloUpper = _.wrap( hello, function (func, name) { return func(name).toUpperCase(); } ); hello("Bob"); helloUpper("Bob");
40. wrap var hello = function(name) { return "Hello " + name; }; var helloUpper = _.wrap( hello, function (func, name) { return func(name).toUpperCase(); } ); hello("Bob"); // => "Hello Bob" helloUpper("Bob");
41. wrap var hello = function(name) { return "Hello " + name; }; var helloUpper = _.wrap( hello, function (func, name) { return func(name).toUpperCase(); } ); hello("Bob"); // => "Hello Bob" helloUpper("Bob"); // => "HELLO BOB"
42. Objects
43. Object Functions allKeys functions omit clone has pairs create invert pick defaults is* property extend keys propertyOf extendOwn mapObject tap findKey matcher values
44. keys / allKeys Underscore.js docs: keys() - Retrieve all the names of the object's own enumerable properties. allKeys() - Retrieve all the names of object's own and inherited properties.
45. keys / allKeys function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b = new Book("Ulysses"); _.keys(b); _.allKeys(b);
46. keys / allKeys function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b = new Book("Ulysses"); _.keys(b); // => ["title"] _.allKeys(b);
47. keys / allKeys function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b = new Book("Ulysses"); _.keys(b); // => ["title"] _.allKeys(b); // => ["title", "format"]
48. values Underscore.js docs: Return all of the values of the object's own properties.
49. values function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b = new Book("Ulysses"); _.values(b);
50. values function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b = new Book("Ulysses"); _.values(b); // => ["Ulysses"]
51. mapObject Underscore.js docs: Like map, but for objects. Transform the value of each property in turn.
52. mapObject var obj = { foo: 4, bar: 8 }; _.mapObject(obj, function (val, key) { return val * 2; });
53. mapObject var obj = { foo: 4, bar: 8 }; _.mapObject(obj, function (val, key) { return val * 2; }); // => { foo: 8, bar: 16 }
54. pairs Underscore.js docs: Convert an object into a list of [key, value] pairs.
55. pairs _.pairs({ foo: 42, bar: "baz" });
56. pairs _.pairs({ foo: 42, bar: "baz" }); // => [["foo", 1], ["bar", "baz"]]
57. create Underscore.js docs: Creates a new object with the given prototype, optionally attaching props as own properties. Basically, Object.create, but without all of the property descriptor jazz.
58. create var book = _.create( Book.prototype, { title: "Moby Dick" } );
59. functions Underscore.js docs: Returns a sorted list of the names of every method in an object — that is to say, the name of every function property of the object.
60. functions _.functions(window);
61. functions _.functions(window); // => [ "_", "addEventListener", "alert", // => "atob", "blur", ... ]
62. findKey Underscore.js docs: Similar to _.findIndex but for keys in objects. Returns the key where the predicate truth test passes or undefined.
63. findKey var obj = { foo: 5, bar: 15 }; _.findKey(obj, function (val, key) { return val > 10; });
64. findKey var obj = { foo: 5, bar: 15 }; _.findKey(obj, function (val, key) { return val > 10; }); // => "bar"
65. clone Underscore.js docs: Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.
66. clone _.clone({ title: 'Crime and Punishment'});
67. clone _.clone({ title: 'Crime and Punishment'}); // => { title: 'Crime and Punishment' }
68. extend / extendOwn Underscore.js docs: extend() - Copy all of the properties in the source objects over to the destination object, and return the destination object. It's in-order, so the last source will override properties of the same name in previous arguments. extendOwn() - Just like extend(), but copies only own properties of supplied objects.
69. extend / extendOwn function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b1 = _.extend({}, new Book()); b1.format; var b2 = _.extendOwn({}, new Book()); b2.format;
70. extend / extendOwn function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b1 = _.extend({}, new Book()); b1.format; // => "hardcover" var b2 = _.extendOwn({}, new Book()); b2.format;
71. extend / extendOwn function Book(title) { this.title = title; } Book.prototype.format = "hardcover"; var b1 = _.extend({}, new Book()); b1.format; // => "hardcover" var b2 = _.extendOwn({}, new Book()); b2.format; // => undefined
72. pick Underscore.js docs: Return a copy of the object, filtered to only have values for the whitelisted keys (or array of valid keys). Alternatively accepts a predicate indicating which keys to pick.
73. pick var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.pick(book, 'title', 'year'); _.pick(book function(val, key, obj) { return _.isNumber(val); });
74. pick var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.pick(book, 'title', 'year'); // => { title: 'The Idiot', year: 1869 } _.pick(book function(val, key, obj) { return _.isNumber(val); });
75. pick var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.pick(book, 'title', 'year'); // => { title: 'The Idiot', year: 1869 } _.pick(book function(val, key, obj) { return _.isNumber(val); }); // => { year: 1869 }
76. omit Underscore.js docs: Inverse of pick(); instead of a whitelist, it accepts a blacklist of keys to remove from object copy.
77. omit var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.omit(book, 'author'); _.omit(book, function (val, key, obj) { return _.isString(val); });
78. omit var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.omit(book, 'author'); // => { title: 'The Idiot', year: 1869 } _.omit(book, function (val, key, obj) { return _.isString(val); });
79. omit var book = { title: 'The Idiot', author: 'Fyodor Dostoyevsky', year: 1869 }; _.omit(book, 'author'); // => { title: 'The Idiot', year: 1869 } _.omit(book, function (val, key, obj) { return _.isString(val); }); // => { year: 1869 }
80. defaults Underscore.js docs: Fill in undefined properties in object with the first value present in the following list of defaults objects.
81. defaults var account = { balance: 100 }; _.defaults(account, { balance: 0, type: 'business' });
82. defaults var account = { balance: 100 }; _.defaults(account, { balance: 0, type: 'business' }); // => { balance: 100, type: 'business' }
83. property / propertyOf Underscore.js docs: property() - Returns a function that will itself return the key property of any passed-in object. propertyOf() - Inverse of _.property. Takes an object and returns a function which will return the value of a provided property.
84. property / propertyOf var book = { title: 'Ulysses' }; 'Ulysses' === _.property('title')(book); _.propertyOf(book)('title');
85. property / propertyOf var book = { title: 'Ulysses' }; 'Ulysses' === _.property('title')(book); // => true _.propertyOf(book)('title');
86. property / propertyOf var book = { title: 'Ulysses' }; 'Ulysses' === _.property('title')(book); // => true _.propertyOf(book)('title'); // => 'Ulysses'
87. matcher Underscore.js docs: Returns a predicate function that will tell you if a passed in object contains all of the key/value properties present in attrs.
88. matcher var seats = [ { num: 7, occupied: false }, { num: 8, occupied: true }, { num: 9, occupied: false } ]; var avail = _.matcher({ occupied: false }); _.filter(seats, avail);
89. matcher var seats = [ { num: 7, occupied: false }, { num: 8, occupied: true }, { num: 9, occupied: false } ]; var avail = _.matcher({ occupied: false }); _.filter(seats, avail); // => [ { num: 7, ... }, { num: 9, ... } ]
90. is* functions isArguments isEqual isNumber isArray isFinite isObject isBoolean isFunction isRegExp isDate isMatch isString isElement isNaN isUndefined isEmpty isNull Underscore.js provides a number of handy matchers for more complex comparisons.
91. tap Underscore.js docs: Invokes interceptor with the object, and then returns object. The primary purpose of this method is to "tap into" a method chain, in order to perform operations on intermediate results within the chain.
92. tap _.chain([ -2, -1, 0, 1, 2 ]) .filter(function (n) { return n > 0; }) .tap(alert) .map(function (n) { return n * 10; }) .value();
93. tap _.chain([ -2, -1, 0, 1, 2 ]) .filter(function (n) { return n > 0; }) .tap(alert) .map(function (n) { return n * 10; }) .value(); // => [ 1, 2 ] (alerted)
94. tap _.chain([ -2, -1, 0, 1, 2 ]) .filter(function (n) { return n > 0; }) .tap(alert) .map(function (n) { return n * 10; }) .value(); // => [ 1, 2 ] (alerted) // => [ 10, 20 ]
95. Utilities
96. Function helpers – identity Underscore.js docs: Returns it's first argument. In math: f(x) = x var obj = { name: 'Foo' }; obj === _.identity(obj);
97. Function helpers – identity Underscore.js docs: Returns it's first argument. In math: f(x) = x var obj = { name: 'Foo' }; obj === _.identity(obj); // => true
98. Function helpers – constant Underscore.js docs: Function generator, new function always returns the first argument of the generator invocation. var obj = { name: 'Foo' }; obj === _.constant(obj)();
99. Function helpers – constant Underscore.js docs: Function generator, new function always returns the first argument of the generator invocation. var obj = { name: 'Foo' }; obj === _.constant(obj)(); // => true
100. Function helpers – noop Underscore.js docs: Returns undefined irrespective of the arguments passed to it. Useful as the default for optional callback arguments. obj.initialize = _.noop;
101. Function helpers – times Underscore.js docs: Invokes iteratee exactly n times, each time passing call index as a first argument. Returns an array of results of each invocation. _.times(3, function (n) { console.log((99 - n) + ' bottles of beer on the wall'); });
102. Math, time & ID helpers – random Underscore.js docs: Returns a random integer between min and max, inclusive. Passing only one argument defaults to random(0, n). _.random(0, 100); // => 42
103. Math, time & ID helpers – now Underscore.js docs: Returns UTC timestamp in milliseconds, using the fastest available method. _.now(); // => 139206679535
104. Math, time & ID helpers – uniqueId Underscore.js docs: Returns a globally-unique id, with optional prefix appended to it. _.uniqueId('contact_'); // => 'contact_104'
105. result Underscore.js docs: If the value of the named property is a function then invoke it with the object as context; otherwise, return it. If a default value is provided and the property doesn't exist or is undefined then the default will be returned. If defaultValue is a function its result will be returned.
106. result var obj = { name: 'Foo', date: function () { return new Date(); } }; _.result(obj, 'name'); _.result(obj, 'date'); _.result(obj, 'bogus', 'bar');
107. result var obj = { name: 'Foo', date: function () { return new Date(); } }; _.result(obj, 'name'); // => "Foo" _.result(obj, 'date'); _.result(obj, 'bogus', 'bar');
108. result var obj = { name: 'Foo', date: function () { return new Date(); } }; _.result(obj, 'name'); // => "Foo" _.result(obj, 'date'); // => Tue Jun 30... _.result(obj, 'bogus', 'bar');
109. result var obj = { name: 'Foo', date: function () { return new Date(); } }; _.result(obj, 'name'); // => "Foo" _.result(obj, 'date'); // => Tue Jun 30... _.result(obj, 'bogus', 'bar'); // => "bar"
110. escape / unescape Underscore.js docs: escape(string) - Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters. unescape(string) – The opposite of escape, replaces &amp;, &lt;, &gt;, &quot;, &#96; and &#x27; with their unescaped counterparts.
111. escape / unescape _.escape('Tom & Jerry'); _.unescape('Tom &amp; Jerry');
112. escape / unescape _.escape('Tom & Jerry'); // => "Tom &amp; Jerry" _.unescape('Tom &amp; Jerry');
113. escape / unescape _.escape('Tom & Jerry'); // => "Tom &amp; Jerry" _.unescape('Tom &amp; Jerry'); // => "Tom & Jerry"
114. template Underscore.js docs: Compiles JS templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can interpolate values, using <%= … %>, and execute arbitrary JS code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>.
115. template var tpl = _.template("Hello <%= name %>!"); tpl({ name: 'World' }); var tpl = _.template("<b><%- val %></b>"); template({ val: '<script>' });
116. template var tpl = _.template("Hello <%= name %>!"); tpl({ name: 'World' }); // => "Hello World!" var tpl = _.template("<b><%- val %></b>"); template({ val: '<script>' });
117. template var tpl = _.template("Hello <%= name %>!"); tpl({ name: 'World' }); // => "Hello World!" var tpl = _.template("<b><%- val %></b>"); template({ val: '<script>' }); // => "<b>&lt;script&gt;</b>"
118. mixin Underscore.js docs: Allows you to extend Underscore with your own utility functions. Pass a hash of {name: function} definitions to have your functions added to the Underscore object, as well as the OOP wrapper.
119. mixin _.mixin({ second: function(array) { return array[1]; } }); _([ "foo", "bar", "baz" ]).second();
120. mixin _.mixin({ second: function(array) { return array[1]; } }); _([ "foo", "bar", "baz" ]).second(); // => "bar"
121. Chaining Underscore.js docs: chain(obj) - Returns a wrapped object. Calling methods (like map, filter, find, etc.) on this object will continue to return wrapped objects until value() is called.
122. Chaining var priorities = [ { name: 'high', val: 5 }, { name: 'medium', val: 3 }, { name: 'low', val: 1 } ]; _.chain(priorities) .sortBy('val') .map(function (p) { return p.name; }) .last() .value();
123. Chaining var priorities = [ { name: 'high', val: 5 }, { name: 'medium', val: 3 }, { name: 'low', val: 1 } ]; _.chain(priorities) .sortBy('val') .map(function (p) { return p.name; }) .last() .value(); // => 'high'
124. Summary
125. Questions?
126. Thank You!