lodash.js API Tour

NCSU Libraries

Getting the workshop materials

github.com/bretdavidson/lodash_code4lib_workshop_2016

  git clone git@github.com:bretdavidson/lodash_code4lib_workshop_2016
          

Agenda

Introductions

• What is your name?
• Where are you from?
• Why are you interested in learning about lodash?

Why JS?

• Increased focus on client side application development
• Lingua franca for frontend development
• Node.js increasingly popular for backend development in JS

What is lodash.js?

• Modular library containing utility functions for working with arrays, numbers, objects, strings etc.
• First released in 2012, forked from Underscore.js
• Current version: 4.5

Why lodash.js?

Native

Object.prototype.pick = function(arr) {
    var _this = this;
    var obj = {};
    arr.forEach(function(key){
        obj[key] = _this[key];
    });
    return obj;
};

var objA = {"name": "colin", "car": "suzuki", "age": 17};
var objB = objA.pick(['car', 'age']);
// {"car": "suzuki", "age": 17}
          

Lodash

var objB = _.pick(objA, ['car', 'age']);
// {"car": "suzuki", "age": 17}
          

Other reasons to use Lodash.js

• Improved performance
• Easier to write and maintain
• Bridge the gap between ECMA specifications
• Modular

Performance

• Performance improvements focus on several key aspects:
  • Optimizing across all browsers
  • Optimizing for the common case
  • Avoid using native JS methods (build on simple for-loops instead)
• Lodash methods generally perform faster than their native equivalents

Example

Lazy Evaluation for Chainable Methods

• Lodash version 3.0 saw the addition of lazy evaluation
• Evaluate method chain beforehand to figure out minimum number of cycles to get correct result, execute only when needed
• Results in large performance gains

Example

lodash is currently the most depended upon package on NPM

General uses for Lodash.js

• Data Processing
• Event Management
• Language normalization

What can lodash.js do?

More Examples

Loop for N Times

  // 1. Basic for loop.
  for(var i = 0; i < 5; i++) {
      // ....
  }

  // 2. Using Array's join and split methods
  Array.apply(null, Array(5)).forEach(function(){
      // ...
  });

  // Lodash
  _.times(5, function(){
      // ...
  });
          

Loop and return deeply nested property

  // Fetch the name of the first pet from each owner
  var ownerArr = [{
      "owner": "Colin",
      "pets": [{"name":"dog1"}, {"name": "dog2"}]
  }, {
      "owner": "John",
      "pets": [{"name":"dog3"}, {"name": "dog4"}]
  }];

  // Array's map method.
  ownerArr.map(function(owner){
    return owner.pets[0].name;
  });
          

Loop and return deeply nested property

  // Fetch the name of the first pet from each owner
  var ownerArr = [{
      "owner": "Colin",
      "pets": [{"name":"dog1"}, {"name": "dog2"}]
  }, {
      "owner": "John",
      "pets": [{"name":"dog3"}, {"name": "dog4"}]
  }];

  // Lodash with callback
  _.map(ownerArr, function(owner){
    return owner.pets[0].name
  });

  // Lodash with shorthand
  _.map(ownerArr, 'pets[0].name');

          

Check all persons taller than 190

  var persons = [
    { name: 'Bob', height : 195 },
    { name: 'Stefan', height : 183}
  ];

  var allPersonsTallerThan190 = _.every(persons, function(person) {
    return person.height > 190;
  });

  // => false
        

Chaining

  var ary = [false, 0, 0, true, true];
  var final = _(ary)
                .compact()
                .uniq()
                .value();

  // => [true]
          

Questions?

Workshop Overview

• Koans style approach
• Divided into three sections
  • API orientation
  • Project-based lodash function application
  • Data exploration, lodash chaining syntax

Workshop introduction

• Open lodash.com in your web browser
• Open code4lib_javascript_workshop/KoansRunnerJS.html in your web browser
• Open code4lib_javascript_workshop/koans/js/AboutExpects.js in a text editor

Break time!

• 15 minutes

Workshop

• Open lodash.com in your web browser
• Open code4lib_javascript_workshop/
  KoansRunnerLoDash.html in your web browser
• Open code4lib_javascript_workshop/
  koans/lodash/AboutCollectionMethods.js in a text editor