Lodash Faves

March 2016

Bob Holben

@rbholben

bholben.com

slides.com/bholben

What is Lodash?

underscore.js

• Jeremy Ashkenas (also known for Backbone & Coffeescript)

• ~ 130 methods

• ~ 2M downloads per week

lodash.com

• John-David Dalton (also known for JSPerf)

• ~ 300 methods

• ~ 4M downloads per week

• #1 most depended on NPM package

• Originally a drop-in replacement for Underscore

• Higher performance

Underscore

+

Lodash

Underdash

When to consider Lodash

• More than ~1,000 LOC

• More than a weekend project

• Moderate amount of data transformations

• Using a framework

• Performance

Core build ~4kB

Full build ~21kB

_.forEach()

_.map()

_.filter()

_.reduce()

var names = [];

users.forEach(function (user) {
  names.push(user.name);
});

// names = ['barney', 'fred']

var users = [
  {name: 'barney', age: 36},
  {name: 'fred', age: 40}
];
// We want names = ['barney', 'fred']

Why bother with Lodash?

1. Browser Compatibility

• Array
• Object
• String

• Shorthand
• Early loop exit

2. Flexibility

• Array

Array.prototype.forEach()

_.forEach()

3. Performance

var array = _.shuffle(_.range(1000));

array.forEach(function (val) {
  return val;
});

_.forEach(array, function (val) {
  return val;
});

Lodash vs. Native JS Loops

https://jsperf.com/array-prototype-foreach-vs-each

https://jsperf.com/array-prototype-map-vs-map

https://jsperf.com/array-prototype-filter-vs-filter

https://jsperf.com/array-prototype-reduce-vs-reduce

Lodash > 80% faster than native Array.prototype methods: forEach(), map(), filter(), and reduce()

Using map...

var users = [
  {name: 'barney', age: 36},
  {name: 'fred', age: 40}
];
// We want names = ['barney', 'fred']

var names = _.map(users, function (user) {
  return user.name;
});

Map shorthand

_.has()

_.get()

_.set()

var data = {
  response: {
    code: '500',
    method: 'GET',
    url: {
      href: 'http://...'
    },
    appl: {
      code: '0',
      msg: 'Invalid type'
    }
  }
};

if (data.response &&
    data.response.appl &&
    data.response.appl.msg) {
  message = data.response.appl.msg;
}

Using has & get...

Cautious navigation...

var data = {
  response: {
    code: '500',
    method: 'GET',
    url: {
      href: 'http://...'
    },
    appl: {
      code: '0',
      msg: 'Invalid type'
    }
  }
};

Using set...

data.parsed = {};
data.parsed.appl = {};
data.parsed.appl.msg = message;

Cautious navigation...

_.isEmpty()

_.includes()

_.last()

if (myArray.length > 0) {
  doSomething();
}

Using isEmpty...

if (myArray.length > 0) {
  doSomething();
}

if (myArray) {
  doSomething();
}

What I really want to do...

Using isEmpty...

if (myArray.indexOf('foo') !== -1) {
  doSomething();
}

Using includes...

Testing for a value

var firstUser = users[0];
var lastUser = users[users.length - 1];

Using last...

var users = [
  {name: 'barney', age: 36},
  {name: 'fred', age: 40}
];

_.round()

_.max()

_.min()

function round(num, precision) {
  return Math.round(Number(num + 'e' + precision)) /
    Number('1e' + precision);
}

round(3.14159, 3);  // 3.142

Rounding a number...

Write your own function

Finding the max/min value...

var myArr = [12, 25, 3];

Finding the max/min value...

_.uniq()

_.union()

_.intersection()

_.xor

_.difference()

Set Theory

a

b

c

a

d

e

var arr1 = ['a', 'a', 'b', 'c'];
var arr2 = ['b', 'c', 'd', 'e'];

Set Theory

arr1

arr2

_.create()

_.assign()

var animal = {
  initAnimal: function () {},

  eat: function () {},

  poop: function () {}
};

var dog = Object.create(animal);

dog.initDog = function () {};

dog.bark = function () {};

dog.howl = function () {};

Pure Prototypal Inheritance

var animal = {
  initAnimal: function () {},

  eat: function () {},

  poop: function () {}
};

var dog = _.create(animal, {
  initDog: function () {},

  bark: function () {},

  howl: function () {}
});

_.create()

var pig = function () {
  return {
    oink: function () {},
    snort: function () {}
  };
};

Object Composition

var dog = function () {
  return {
    bark: function () {},
    howl: function () {}
  };
};

var curly = Object.assign({}, pig(), dog());

var pig = function () {
  return {
    oink: function () {},
    snort: function () {}
  };
};

_.assign()

var dog = function () {
  return {
    bark: function () {},
    howl: function () {}
  };
};

var curly = _.assign({}, pig(), dog());

_.range()

_.times()

_.countBy()

_.sortBy()

_.range(10);

// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Using range...

for (var i = 0; i < 6; i++) {
  $('#nextBtn').click();
}

Using times...

var users = [
  {name: 'fred', category: 'father'},
  {name: 'wilma', category: 'mother'},
  {name: 'barney', category: 'father'},
  {name: 'betty', category: 'mother'}
];

Using countBy...

var users = [
  {name: 'barney', age: 36},
  {name: 'fred', age: 40},
  {name: 'betty', age: 35},
  {name: 'wilma', age: 39}
];

Using sortBy...

Method Wrapping

vs

Method Chaining

Method Wrapping

var users = [
  {name: 'fred', age: 40, gender: 'male'},
  {name: 'wilma', age: 39, gender: 'female'},
  {name: 'pebbles', age: 2, gender: 'female'},
  {name: 'barney', age: 36, gender: 'male'},
  {name: 'betty', age: 35, gender: 'female'},
  {name: 'bamm bamm', age: 2, gender: 'male'}
];

// We want the youngest adult male

Method Chaining

var users = [
  {name: 'fred', age: 40, gender: 'male'},
  {name: 'wilma', age: 39, gender: 'female'},
  {name: 'pebbles', age: 2, gender: 'female'},
  {name: 'barney', age: 36, gender: 'male'},
  {name: 'betty', age: 35, gender: 'female'},
  {name: 'bamm bamm', age: 2, gender: 'male'}
];

// We want the youngest adult male

Method Chaining

• Improved readability

• "How to Speed Up Lo-Dash x100?  Introducing Lazy Evaluation" - Filip Zawada

Method Composition

• Pruning the 21kb kitchen sink lodash lib is complex

• "Why using _.chain is a mistake" - Izaac Shroeder

• Functional programming (currying & composition)

What to do?

Lodash & Angular 1

Lodash as a Global

npm install

bower install

Make globally accessible with script tag

The Angular Way:

Dependency Injection

angular.module('lodash', [])
  .factory('_', function() {

    return window._;
  });

angular.module('lodash', [])
  .factory('_', function() {

    var lodash = window._;

    // Don't delete if needed by 3rd party libs!!
    delete window._;

    return lodash;
  });

The Angular Way:

Dependency Injection

angular.module('lodash', [])
  .factory('_', function() {

    var lodash = _.noConflict();

    return lodash;
  });

The Angular Way

with a Lodash Twist

Highlights

• Get to know Lodash's jewels

• Favor Lodash looping constructs

• Get comfortable with _.map() & _.filter()

• Grow to love _.has() & _.get()

• Method chaining is sweet

Tips

• Review Lodash docs regularly

• Explore in the browser console on Lodash page

Bob Holben

@rbholben

bholben.com

slides.com/bholben