Lo-dash

Why use?
  • Reduce/Eliminate code cruft
  • Performance
  • Functional constructs = fewer bugs
  • Examples
    • Array iteration
    • Filtering
    • String templating
    • Map/Select
    • Chain
    • Set-like operations
    • Utility Functions

Code Cruft (Yuck!)


How to avoid:
Don't repeat yourself! (DRY)
Keep things immutable (where possible)
Don't mutate outside of local scope (where possible)
We'll see how lo-dash can help...

Performance


Lo-dash uses fastest-available methods per-browser

On average, faster than Underscore!

Really smart people created Lo-dash and Underscore ->

USE THEIR HARD WORK FOR YOUR WIN

Functional

Topic for another presentation, but...
Immutability...use it
Less code
Easier to test
Easier to maintain
Overall, a good thing...

Lo-dash pushes you to write functional JS

Examples, typical use-cases

  • Array Iteration

Iterate over those arrays

OLD
var a = [1,2,3,4,5,6];
for ( var i = 0; i < a.length; i++) {   console.log( a[i]);
}
NEW (why is this better?)
var a = [1,2,3,4,5,6];_.each(a, function(e) {  // Optional 2nd parameter in callback is index   console.log(e);});
jsbin

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering

filter a collection/list/whatev

var a = [
  {name: "Fred", state: "MO", age: 25},
  {name: "Bobby", state: "IL", age: 34},
  {name: "Marcus", state: "MO", age: 22},
  {name: "Jenny", state: "IL", age: 39}
];

// Find people from MO (OLD WAY)
var ret = [];
for ( var i = 0; i < a.length; i++) {
  if ( a[i].state === "MO") {
    ret.push(a[i]);
  }
}
// Much better_.filter(a, { state: "MO"});

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering
  • String Templating

string templating

No more gnarly string concats! => "" + v + "!"
Prone to error

var joe = { fName: "Joe", lName: "McGee", times: 4};

var myString = "Hi, " + joe.fName + " " + joe.lName + "!  You've been to this site " + joe.times + " times!";

console.log( myString);

var better = _.template("Hi, <%= e.fName %> <%= e.lName %>!  You've been to this site <%= e.times %> times!", { e: joe});

console.log( better);

jsbin

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering
  • String Templating
  • Map/Select

Map/select/project

var cart = [{ productName: "Fish", quantity: 4, cost: 10.40},
            { productName: "Beef", quantity: 2, cost: 5.50},
            { productName: "Green stuff", quantity: 25, cost: 0.75}];

// Get extended line items => { productName: "XXX", totalCost: XX.XX}

var lineItems = [];
for ( var i = 0; i < cart.length; i++) {
  var line = { productName: cart[i].productName,
               totalCost: cart[i].quantity * cart[i].cost};
  lineItems.push( line);
}

console.log( lineItems);

var total = 0;
for ( var i = 0; i < lineItems.length; i++) {
  total += lineItems[i].totalCost;
}

console.log( total);

var easierLines = _.map(cart, function(f) {
  return { productName: f.productName, total: f.cost * f.quantity};
});

var easierTotal = _.reduce(easierLines, function(sum, current) {
  return sum + current.total;
}, 0);

console.log( easierTotal);

jsbin

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering
  • String Templating
  • Map/Select
  • Chain

chain

Why use?
var items = [{ a: 1, b: 2, c: 3}, ... ];_.first(_.filter(_.map( items, function(i) { ... }), function() { ... }...

Gets ugly (and confusing)...real quick

var cart = [{ productName: "Fish", quantity: 4, cost: 10.40},
            { productName: "Beef", quantity: 2, cost: 5.50},
            { productName: "Green stuff", quantity: 25, cost: 0.75}];

// Find the most expensive item in the cart from items that have a
// total cost > $15var ret =
  _.chain(cart)
  .map(function(c) {
    return { productName: c.productName, total: c.quantity * c.cost}
  })
  .filter(function(c) {
    return c.total > 15;
  })
  .sortBy('-total')
  .first()
  .value();

console.log(ret);
jsbin

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering
  • String Templating
  • Map/Select
  • Chain
  • Set-like operations

set-like operations

Operate on arrays

_.uniq
_.union
_.intersection
_.difference

All use strict (===) equality => no inherent object comparisons
e.g.:
 _.uniq([{a:1}, {a:1}, {b:1}]) => [{a:1}, {a:1}, {b:1}]

EXAMPLES, TYPICAL USE-CASES

  • Array Iteration
  • Collection Filtering
  • String Templating
  • Map/Select
  • Chain
  • Set-like operations
  • Utility functions

Utility functions

_.isUndefined(x) =>
_.has(d, k) => does object d have key k?
_.defaults(d, s) => applies properties from object s to d IF property is undefined in d
_.cloneDeep(x) => create "deep" copy

THERE ARE TONS OF ADDITIONAL AWESOME GOODIES!!!

If it's a common operation you're doing, lo-dash probably has something for you!

Questions?





Thank you!

for staying awake...at least most of the time

- JOE MEILINGER

joemeilinger@gmail.com
@JOEMEILINGER

Lo-dash

By Joe Meilinger

Made with Slides.com

Lo-dash

Why/how use lo-dash vs POJS for things like iteration, filtering, etc

  • 531

More from Joe Meilinger