An Introduction To Underscore.js

Nick Brown BackboneJS, Development Technology, JavaScript Leave a Comment

Attention: The following article was published over 4 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

Recently I starting working in the Backbone.js framework which has dependency on the Underscore.js framework. Underscore is a JavaScript utility library with many useful functions to handle common programming use cases.

I decided it would be a good idea to spend some time discovering what all the framework has to offer those within and outside of Backbone. In this blog, I discuss some of the more useful functions I have found inside of Underscore.

_.each

You can use _.each to make more easily readable loops. Here is a common way to loop through an array in JavaScript:

var list = [1 , 2 ,3];
for(var i = 0; i < list.length; i++ ) {
    console.log(list[i] * 2); //logs ‘2, 4, 6’
}

Using underscore’s _.each, we can make this much more readable, mainly as you are not having to use access the items of the array with the index.

    _.each(list, function (item, index, list) {
	console.log(item * 2);//logs ‘2, 4, 6’
});

_.map is similar, but returns an array built from the outputs of the function.

var result = _.map(list, function (list, function (item, index, list) {
    return item * 3;
})); 
console.log(result);//logs ‘[3, 6, 9]’

_.filter

This does what you can probably guess by its name: filters a collection. It loops through a collection and returns an array of entries that return true for a truth test.

var result = _.filter(list, function (item) { return item % 2 == 1 }); 
console.log(result);// logs '[1,3]'

_.times

This is a very simple way to loop a specific number of times.

_.times(5, function () {
    console.log('hello');// will log hello 5 times
});

_.pluck

This is a convenient way for pulling out a list of property values from a list of objects.

See Also:  Go "On The Fly"

A fairly common task in coding might be getting a list of names from a collection of people objects. Here is a way of doing this in JavaScript:

var people = [{
    name: 'John',
    age: 30,
    state: 'KS'
}, {
    name: 'Phil',
    age: 25,
    state: 'KS'
}, {
    name: 'Bob',
    age: 50,
    state: 'NY'
}];
var names = people.map(function(person) {
    return person.name
});
console.log(names); // logs '["John", "Phil", "Bob"]'

This can be simplified with Underscore to:

var names = _.pluck(people, 'name');
console.log(names);// logs '["John", "Phil", "Bob"]'

_.findWhere

This can used to find a single object from a collection that matches the given key-value pairs. First I’ll write something similar using just JavaScript:

var person;
for (var i = 0; i < people.length; i++) {
    if (people[i].name === 'Phil' && people[0].state == 'KS') {
        person = people[i];
    }
}
console.log(person); //logs '{name: "Phil", age: 25, state: "KS"}'

Now see it simplified with Underscore:

var person = _.findWhere(people, { name: 'Phil', state: 'KS' });
console.log(person);//logs '{name: "Phil", age: 25, state: "KS"}'

Not only is the code more simple to write, but notice how much more apparent it is to the reader what the code is actually trying to accomplish.

_.where

_.where is similar to _.findWhere, but will return an array of all matching entries instead of just the first one found.

var kansasPeople = _.where(people, { state: 'KS' });

_.sortBy

Sorting collections by property name can done with _.sortBy.

var sortedPeople = _.sortBy(people, 'age');
console.log(_.pluck(sortedPeople, 'name'));//logs '["Phil", "John", "Bob"]'

Backbone leverages its dependency on Underscore so that Backbone collections can inherently use many of the underscore iteration functions such as each, map, findWhere, Where, Filter, sortBy, etc. These prove quite useful and powerful when dealing with large data collections.

See Also:  Placing React in Timeout with Material-UI

There are multiple type checking methods and are super simple to read and understand that can come in handy.
_.isString(object);
_.isNumber(object);
_.isBoolean(object);
_.isDate(object);
_.isNan(object);
_.isNull(object);
_.isUndefined(object);

Underscore can even be used to template strings. This is useful for creating html templates with objects.

var helloTemplate = _.template(
    '<h1>Hello <%= name %></h1>');
var htmlString = helloTemplate(people[2]);
console.log(htmlString); //'<h1>Hello Bob</h1>'

You can write JavaScript logic within templates, like in the following example. This would produce an unordered list of all the people in the person array.

var listTemplate = _.template(
    '<ul><% _.each(people, function (person) { %>' +
    '<li><%= person.name %></li>' +
    '<% }) %></ul>

');
var htmlListString = listTemplate({
    people: people
});

Final Thoughts

These were some pretty simple examples of what can be found in the Underscore framework. Some of the benefits are less apparent in smaller and simpler code chunks. But, as the complexity of the code increases, this is where Underscore really shines as the useful toolbox that it is.

Using the framework can allow you to be more expressive in your code, improving readability for all those that may have to eventually dig through your code.

There are many other functions Underscore.js has in its library. You can read more about the rest of them at http://www.underscorejs.org.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments