The Lo-Dash on Underscore.js and Strings

By February 17, 2014JavaScript

If you are not using Underscore.js in your JavaScript development, then you are really missing out. It cuts out so much redundant functions you find yourself creating when dealing with collections, objects, and conditions, such as finding, filtering, plucking, and so much more. You will instantly see the power of Underscore.js by examining this example:

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
 
_.pluck(stooges, 'name');
 
=> ["moe", "larry", "curly"]

It is simply “plucking” out the “name” property from the array of objects. This is one of the several examples of what it can do. Here’s another example of getting objects that match certain properties:

_.where(listOfPlays, {author: "Shakespeare", year: 1611});
 
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

A beauty isn’t it? Try doing this with vanilla JavaScript… it’s so painful I will leave it up to your imagination 😉

What About Strings?

There isn’t any strings manipulation in Underscore, which is a big oversight in my opinion. Fortunately, Underscore has a great plugin system and probably the most useful Underscore.js plugin is Underscore.strings. With it you can truncate, trim, humanize, capitalize, prune, pad, and so much more with strings. You can even merge the strings plugin into the Underscore namespace like this:

_.mixin(_s.exports());

That way, your Underscore namespace has been extended with the functions from the strings plugin. You will magically have new functions for Underscore like this:

_.ltrim(mystring, '?')

The function “ltrim” isn’t part of Underscore.js, but actually part of Underscore.strings.

What’s the Lo-Dash?

Underscore.js is so popular, that Lo-Dash has been created as drop-in replacement for it. It fills any gaps like performance and AMD-compliance. Not only this, it has added it’s own functions to the mix. And when I say it’s a drop-in replacement, it really is that! Just replace the script file from underscore.js to lo-dash.js and all your existing Underscore implementations will continue to work as if nothing changed, except now you get some extra sugar with Underscore.

What About RequireJS?

If you are using RequireJS for your web applications, you can still use Underscore.js. You’ll have to add it to the shim config of RequireJS, or use Lo-Dash which is AMD-compliant. If you want to merge the Underscore.strings plugin into the “_” namespace, you can add this to your main.js after your RequireJS config:

define('underscore', [
    'lodash',
    'underscore.string'
], function (_, _s) {
    //MERGE STRING PLUGIN TO UNDERSCORE NAMESPACE
    _.mixin(_s.exports());
    return _;
});

Now you don’t have to keep calling Lo-Dash and Underscore.strings as dependencies all the time. Just call the ‘underscore‘ dependency you just created like this:

require('underscore', function (_) {
    console.log(_.capitalize("foo Bar")); //=> "Foo Bar"
});

Congratulations, you have just made Underscore.js more powerful than it already was.

Happy Coding!!

The following two tabs change content below.