Lodash: 10 Javascript Utility Functions That You Should Probably Stop Rewriting

While I'm working on Javascript applications, I often found myself writing utility module which contains, unsurprisingly, utility methods. So what are utility module?

A utility class is a class that defines a set of methods that perform common, often re-used functions. - Wikipedia

From dealing with strings and objects to collections iterating problems, there will always be cases where there is a gap for a utility function to fulfil.

Even with the mainstream adoption of ES6, I dare say that Javascript developers still don't get as much syntax sugars as other languages such as Objective-C and Ruby. Hence, the need to write custom helpers for utilitarian tasks is still prevalent in Javascript applications.

However, as of late, I came to be very fond of a library which provides clean and performant utility methods - Lodash.

Whereas jQuery is the Swiss Army knife of DOM, Lodash is the equivalent of the Batman’s utility belt for Javascript. And just like Batman who always has some gadgets in his trusty belt to get out of sticky situation, Lodash comes with a lot of goodies at only 18.7KB minified (Not even gzipped yet). It is also written in a functional style hence, it should be really straightforward to get going.

Below are 10 utility methods that I had stopped rewriting in my Javascript application. Each example is accompanied by a Lodash solution.

PS. Please do note that I'm using Lodash v3.10.0.

1) 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(){
    // ...
});

The for loop is the classic workhorse for such a use-case but it pollutes the scope with an additional variable. With array and the apply method, we can achieve the N loop without creating an additional variable. However, it is still a tad lengthy for my taste. Lodash's _.times method is self-explanatory. Easy on the eyes and my fingers.

Take note: If your N is going to be non-trivial, please use a basic for loop or a reverse while loop for a much more performant iteration.

2) Loop through a collection and return a deeply-nested property from each item

// 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;
});

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

Lodash's map method works exactly like Javascript native array method except that it has a sweet upgrade. It's able to navigate deeply-nested property by just providing a string instead of a callback function.

Take note: There is a much more specific method for this use-case: _.pluck.

Apparently _.pluck will be removed in v4 of Lodash. Use _.map for forward-compatibility. Source

Two of the same kind

_.pluck(ownerArr, 'pets[0].name');

_.map(ownerArr, 'pets[0].name');

There seems to be some confusion with this. In terms of usage, there are no difference. As for behind-the-scene implementation, John-David Dalton had kindly drop me a note that they are apparently the same too. That's why he's removing it.

3) Create an array of N size and populate them with unique values of the same prefix

// Create an array of length 6 and populate them with unique values. The value must be prefix with "ball_".
// eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]

// Array's map method.
Array.apply(null, Array(6)).map(function(item, index){
    return "ball_" + index;
});


// Lodash
_.times(6, _.uniqueId.bind(null, 'ball_'));

We already know how useful _.times is from the previous example. By using it in combination with the _.uniqueId method, we are able to come up with a more concise solution. If you don't want to repeatedly state the context, Lodash have a method for that too.

Get rid of the .bind(null,...)

// Lodash
_.times(6, _.partial(_.uniqueId, 'ball_'));

The _.partial method basically does the same thing as the native bind method except it assumes the context to this. Hence, no need to specify the additional context parameter.

4) Deep-cloning Javascript object

var objA = {
    "name": "colin"
}

// Normal method? Too long. See Stackoverflow for solution: http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript

// Lodash
var objB = _.cloneDeep(objA);
objB === objA // false

Deep-cloning javascript object is difficult and there is no easy way around it. Altenative naive solution: JSON.parse(JSON.stringify(objectToClone)) for deep-cloning. However, this will only work if there are no function within the object.

Just use _.cloneDeep and you can sleep soundly at night. You can also use _.clone for flexibility in choosing the depth of clone.

5) Get Random Number between a range

// Get a random number between 15 and 20.

// Naive utility method
function getRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomNumber(15, 20);

// Lodash
_.random(15, 20);

The _.random method is pretty dynamic and is able to achieve results that the above naive method can't. Returning random floating number and taking in single parameter as maximum value will add substantial amount of code to our custom utility method.

Additional option for _.random

_.random(20); // Return random number between 0 to 20
_.random(15, 20, true); // Return random floating numbers between 15 and 20

6) Extending object

// Adding extend function to Object.prototype

Object.prototype.extend = function(obj) {

    for (var i in obj) {

        if (obj.hasOwnProperty(i)) {

            this[i] = obj[i];

        }

    }

};


var objA = {"name": "colin", "car": "suzuki"};

var objB = {"name": "james", "age": 17};

objA.extend(objB);

objA; // {"name": "james", "age": 17, "car": "suzuki"};

// Lodash

_.assign(objA, objB);

The _.assign method can also accept multiple objects for extension.

Extending multiple objects

var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};
var objC = {"pet": "dog"};

// Lodash
_.assign(objA, objB, objC)
// {"name": "james", "car": "suzuki", "age": 17, "pet": "dog"}

7) Removing properties from object

// Naive method: Remove an array of keys from object

Object.prototype.remove = function(arr) {

    var that = this;

    arr.forEach(function(key){

        delete(that[key]);

    });

};


var objA = {"name": "colin", "car": "suzuki", "age": 17};

objA.remove(['car', 'age']);

objA; // {"name": "colin"}

// Lodash

objA = _.omit(objA, ['car', 'age']); // {"name": "colin"}

The naive method only considers an array parameter. We might also want to cater for a single string parameter for single key deletion or even accepting a comparator.

More use-cases

var objA = {"name": "colin", "car": "suzuki", "age": 17};

// Lodash
objA = _.omit(objA, 'car'); // {"name": "colin", "age": 17};
objA = _.omit(objA, _.isNumber); // {"name": "colin"};

Once again, catering for such cases would have added substantial amount of code into the naive utility function. _.omit method help us handle all those situation.

You should also note that _.omit returns a new object that has no reference to the object passed in. This is really useful if you do not want your omitted object to be affected by changes to the former object.

8) Select properties from another object to form new object

// Naive method: Returning a new object with selected properties 
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}

The _.pick method is the opposite of _.omit where you get to pick the selected properties of another object. _.pick comes with all the benefits that _.omit provides too - New object creation and ability to take in single string, array and comparator functions.

9) Selecting a random item from a list

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

function pickRandomPerson(luckyDraw){
    var index = Math.floor(Math.random() * (luckyDraw.length));
    return luckyDraw[index];
}

pickRandomPerson(luckyDraw); // John

// Lodash
_.sample(luckyDraw); // Colin

The _.sample method also comes with an additional bonus feature - Selecting multiple random item from list.

Multiple random item

var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"];

// Lodash - Getting 2 random item
_.sample(luckyDraw, 2); // ['John','Lily']

10) Error handling for JSON.parse

// Using try-catch to handle the JSON.parse error
function parse(str){
    try {
        return JSON.parse(str);
    }

    catch(e) {
        return false;
    }
}

// With Lodash
function parseLodash(str){
    return _.attempt(JSON.parse.bind(null, str));
}

parse('a'); // false
parseLodash('a'); // Return an error object

parse('{"name": "colin"}'); // Return {"name": "colin"}
parseLodash('{"name": "colin"}'); // Return {"name": "colin"}

If you are using JSON.parse in your application and you are not handling the errors, I urge you to do so immediately. An unhandled JSON.parse error is like a ticking bomb. Never assume the JSON object you are receiving is completely valid. But I digress.

Although we didn't completely replace the try-catch utility method, we managed to remove the unsightly try-catch blocks. The _.attempt prevents JSON.parse from throwing an application error. Instead, it return an Error object.

---

Conclusion

Lodash has been doing great for me and I will continue to drop it in all my Javascript project. It reduces the amount of boilerplate code and also improves the clarity of my application logic.

But my biggest takeaway is this - Lodash forces me to think in a more functional manner. I break my application into many smaller modules with singular focus and no side effects. This increased modularity allows me to increase the application code coverage during unit testing.

Recommended Reading: Lo-Dash Essentials