JavaScript


with Underscore.js

http://seattlejs.training.formidablelabs.com

@FormidableLabs | formidablelabs.com

Tip - space bar advances slides

Underscore.js

A functional programming toolkit with powerful, flexible, and cross-browser abstractions.


Makes app development easier and better

Concepts

  • Iteration
  • Transformation
  • Filtering
  • Finding
  • Reduction
  • Utilities
  • Chaining

Implementations

Lo-Dash

lodash.underscore.js

  • Focus on performance, correctness, testing.
  • Custom builds, some with extra features.

Iteration

each

Like most Underscore.js methods, works with objects or arrays.

Iteration Demo


                // Works with **arrays**
                _.each(["one", "two", "three"], function (item, i) {
                  console.log(i + ": " + item);
                });
                
                // Works with **objects**
                _.each({ foo: "f", bar: "b" }, function (val, key) {
                  console.log(key + ": " + val);
                });
                

Transformation

  • map: Transform elements.
  • sortBy
  • groupBy: Divide lists into dictionary by group key.

Transformation Demo


                // Uppercase all elements.
                var ups = _.map(["tiger", "cow", "bear"], function (item) {
                  return item.toUpperCase();
                });
                
                // Now sort by length of string.
                var sorted = _.sortBy(ups, function (item) {
                  return item.length;
                });
                
                console.log("Animals: " + sorted);
                

Filtering

Filtering Demo


                var bugs = ["bee", "ant", "beetle"];
                
                var bStarts = _.filter(bugs, function (item) {
                  return item[0] === "b";
                });
                
                console.log("Starts with 'b': " + bStarts);
                

Finding

Finding Demo


                var bugs = ["bee", "ant", "beetle"];
                var isB = function (item) {
                  return item[0] === "b";
                };
                
                var firstB = _.find(bugs, isB); // [TRY]: `where`
                console.log("First 'b': " + firstB);
                
                var allBs = _.every(bugs, isB); // [TRY]: `some`
                console.log("All items are 'b'?: " + allBs);
                

Reduction

Convert a list to a single value.

reduce

Reduction Demo


                var bugs = ["bee", "ant", "beetle"];
                var totalLen = _.reduce(bugs, function (memo, item) {
                  return memo + item.length;
                }, 0);
                
                console.log("Found " + totalLen + " characters!");
                

Utilities

Utilities Demo


                var count = 0;
                
                // Fibonacci: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...
                var fib = function (num) {
                  count++;
                  if (num < 2) { return num; } // 0, 1
                  return fib(num - 1) + fib(num - 2);
                };
                
                //fib = _.memoize(fib);
                
                console.log("fib(3): "  + fib(3)  + " (" + count + ")");
                console.log("fib(10): " + fib(10) + " (" + count + ")");
                console.log("fib(20): " + fib(20) + " (" + count + ")");
                

Chaining

Combine almost any of the iteration, transformation and filtering methods!

chain | value

formidablelabs.github.io/underscore-chain-talk/

Chaining Demo


                // Keep values w/ "b", sort by length, and upper case.
                var results = _.chain(["beetle", "ant", "bee"])
                  .filter(function (val) { return /^b/.test(val); })
                  .sortBy(function (val) { return val.length; })
                  .map(function (val) { return val.toUpperCase(); })
                  .value();
                  
                console.log("Results: ", results);
                

Underscore.js

@FormidableLabs | formidablelabs.com