Getting Started with Underscore.js

This article was peer reviewed by Agbonghama Collins and Ryan Chenkie. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Underscore.js is a JavaScript library, written by Jeremy Ashkenas, that provides functional utilities for a variety of use cases that we, as developers, may come across when facing a web project.

It makes for code which is easier to read:

_.isEmpty({});
// true

It makes for code which is easier to write:

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

It offers features for which there isn’t a 1:1 native method:

_.range(5);
// [0, 1, 2, 3, 4]

It can even be used as a template engine in its own right:

_.template('<p><%= text %></p>', {text: 'SitePoint Rocks!'});
// <p>SitePoint Rocks!</p>

Underscore is a lightweight library (just 5.7kb, minified and Gzipped) and is used by a variety of big name projects, such as:

• USA Today
• Rdio
• Khan Academy

Now let’s get more specific and start diving into its main capabilities.

The Good Parts

In this tutorial, I’m going to highlight three of Underscore’s most common methods:

• _.each()
• _.template()
• _.filter()

I’ll explain how they are used individually, then tie them together to build a demo application that you can find at the end of the tutorial. As ever, the code for this demo is available on Github.

If you wish to follow along with the examples, you’ll need to grab a copy of the library, for example from your favourite CDN:

<script src="http://ift.tt/1PK5SGd"></script>

And if you find yourself in need of help along the way, or you’re just curious to find out more, don’t forget that Underscore’s documentation is extensive. It also has a large and active community, meaning help is easy to find.

_.each: Write Readable Loops

There is not a single project that does not have something similar to this snippet at some point in the code:

var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones'];

for(var i = 0; i < artists.length; i++) {
  console.log('artist: ' + artists[i]);
}

Underscore enables you to write equivalent code, using a syntax that is more readable:

var artists = ['Pharrel Williams', 'Led Zeppelin', 'Rolling Stones'];

_.each(artists, function(artist, index, artists) {
  console.log('artist: ' + artist);
});

Neat, eh? _.each() takes two parameters:

• The array (or object) to iterate over.
• A callback function.

For each element in our array _.each() will invoke the callback function (referred to in the documentation as iteratee). Inside the callback we get access to a further three parameters:

• The value of the array for the current iteration index (artist). For example, for the snippet above we’d get “Pharrel Williams” for the first iteration.
• The number of the current iteration (index), which in our case will vary from 0 to 2.
• The array that we are iterating through (artists).

As you can see the code is more readable and we can access the individual elements in the array without the need for artists[i], as we saw in the example that used a for loop.

See the Pen _.each by SitePoint (@SitePoint) on CodePen.

Next, we’ll see how the templating engine behaves.

_.template(): Intuitive and Straightforward

Since the rise of the Single Page Application, having a reliable frontend templating engine has become a fundamental need for our working stack.

Underscore provides a templating engine, which, for those familiar with languages such as PHP, or Ruby on Rails, will seem quite familiar.

Carrying on from our previous snippet, we’ll demonstrate how _.template() works. We’ll do this by adding a couple of lines to our code as shown below:

var artists = ['Led Zeppelin', 'ACDC', 'Rolling Stones'],
    artistTemplate = _.template('<li><%= artist %></li>'),
    content = '';

_.each(artists, function(artist, index, artists) {
  content += artistTemplate({
    artist: artist
  });
});

var container = document.createElement('ol');
container.innerHTML = content;
document.body.appendChild(container);

Here we are invoking the _.template() function with a string argument, which includes some data inside delimiters (<%= artist %>). When invoked in this way, _.template() returns a function which we can use again and again.

We can invoke our new function using artistTemplate(), passing it an object literal as an argument. This will return the string we originally passed to _.template(), substituting any object properties which correspond to the template’s free variables. In our case <%= artist %> will be substituted by the value in the artist attribute of the object.

Underscore’s templating engine, does not only allow for single values to be replaced, but also the execution of scripts inside the template itself. With a single modification, we can make our snippet even more powerful.

var artists = ['Led Zeppelin', 'ACDC', 'Rolling Stones'],
    artistTemplate = _.template(
      '<% _.each(artists, function(artist, index, artists) { %>' +
        '<li><%= artist %></li>' +
      '<% }); %>'
    ),
    content = artistTemplate({
      artists: artists
    });

var container = document.createElement('ol');
container.innerHTML = content;
document.body.appendChild(container);

We have incorporated our call to _.each() into the string that represents our template, which leads us to change the way the template is invoked. Since we are now iterating inside the _.template() function, we can pass the complete artists array to artistTemplate() (previously we were passing the individual artists). The output of this code will be the same as in the previous example.

When we want _.template() to evaluate JavaScript code, we just have to surround our code between <% %> instead of <%= %>.

Since invoking a template generated by _.template works just as invoking a function, we can take our snippet one step further and have one template called from inside another, by using the <% %> tags. This way, we can make reusable templates, since we can have a different wrapper template for our artists list and just invoke the template for each of the items it contains.

See the Pen _.template() by SitePoint (@SitePoint) on CodePen.

Finally, let’s take a look at the _.filter() function.

Continue reading %Getting Started with Underscore.js%

by Martín Martínez via SitePoint