Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Learning UnderscoreJS
  • Table Of Contents Toc
Learning UnderscoreJS

Learning UnderscoreJS

By : Alexandru Vasile Pop
4.6 (5)
close
close
Learning UnderscoreJS

Learning UnderscoreJS

4.6 (5)
By: Alexandru Vasile Pop

Overview of this book

Underscore.js is one of the most popular modern JavaScript libraries used for functional programming. It can be used as a base for building complex JavaScript applications in a sustainable manner and for building other JavaScript libraries. It embraces functional programming principles but is not opinionated and can be used with imperative, object-oriented, functional, or other programming styles. This book explores how to use Underscore.js to power your code and understand modern JavaScript development concepts while applying a lightweight and efficient workflow to build applications. The book starts with an incremental Underscore.js introduction by exploring key JavaScript concepts. You will then explore the basic features of Underscore.js in action and establish a lightweight development workflow that allows the provided examples to be guided by tests. The book then covers the functionality of Underscore.js with in-depth examples and explanations for understanding and applying the Underscore.js API. You'll also learn how to use Underscore.js as a base for your own modules and libraries within an object-oriented or functional programming style, and will be able to explore Underscore.js use cases in different environments. Eventually, you'll learn about libraries that are closely related with Underscore.js, how to share code between client and server, and how to prepare for the upcoming JavaScript standard ECMAScript 6.
Table of Contents (9 chapters)
close
close
8
Index

Key Underscore functions

Out of the many Underscore functions, there are a couple that deserve special attention as they provide a good introduction to a range of similar functions. These functions are essential when processing data, they have an equivalent in the ES5 specification, and they are: each, map, and reduce.

Underscore each

In the first example, we used the ES5 function Array.prototype.forEach to iterate the initial dataset. Underscore also provides its own version called _.each(). The main difference from the Array.prototype.forEach function is that _.each() can be used against object properties if an object rather than array is provided as its first argument. The full function signature is _.each(list, iteratee, [context]) and it will call the second function parameter iteratee against each item of the iterated list object or array passed as its first argument. To use this function in the second example starter-example-with-underscore.find from this chapter, we just need to replace this line from the getBicyclesCountPerType() function:

bicycles.forEach(function(bicycle) {

With line:

_.each(bicycles, function(bicycle) {

Underscore each has a forEach alias, so it can be called in a similar way with its ES5 equivalent:

_.forEach(bicycles, function(bicycle) {

Another difference from the ES5 equivalent is that Underscore each returns the first parameter as opposed to undefined allowing further function call chaining. Underscore also has first class support for function chaining that will be detailed in Chapter 4, Programming Paradigms with Underscore.js.

We will explore calling each over object properties together with other Underscore functions mentioned in this chapter in Chapter 2, Using Underscore.js with Collections.

Underscore map and reduce

The next Underscore functions of special interest are map and reduce. The Underscore map function signature is similar to the each function signature: _.map(list, iteratee, [context]). It transforms a list array or object parameter into a new array that contains modified elements or property values of the list parameter. The transformation is made by:

  • Iterating the elements or properties of the list parameter using the second parameter function iterate, and calling this function for each item;
  • Collecting the values of the iteratee call into the array returned by the _.map() function.

Underscore reduce is a function that converts an array or object properties into a single value. The function signature is _.reduce(list, iteratee, [memo], [context]) and the optional memo parameter is used as the seed for the returned value. If memo is not specified, then the first element or object property value of the list parameter will be used as the seed value instead. The iteratee function signature is iteratee(memo, element, index, list) when list is an array like object. The value returned by iteratee is either supplied as the memo parameter for the next iteration or is returned as the final reduce value if there are no more iterations left.

The next example will showcase these two functions by iterating over an array of people that have received an important award at some point in their lives—the Nobel prize for literature. The example calculates the age when the award was received using _.map() and the average value of the age when the award was received using _.reduce().

This is the initial dataset:

var people = [{
    name: "Herta Muller",
    birthYear: 1953,
    awardYear: 2009
  }, {
    name: "Mario Vargas Llosa",
    birthYear: 1936,
    awardYear: 2010
  }, {
    name: "Tomas Transtromer",
    birthYear: 1931,
    awardYear: 2011
  }, {
    name: "Mo Yan",
    birthYear: 1955,
    awardYear: 2012
  }, {
    name: "Alice Munro",
    birthYear: 1931,
    awardYear: 2013
  }, {
    name: "Patrick Modiano",
    birthYear: 1945,
    awardYear: 2014
  }];

First, we calculate the age when the award was received for each person by using _.map():

var peopleWithAwardAge = _.map(people, function(person){
  return {
    name: person.name,
    awardAge: person.awardYear - person.birthYear
  }
});

Next, we calculate the average age of the award by using _.reduce() and passing 0 as the memo seed value:

var totalAge = _.reduce(peopleWithAwardAge, function(memo, person) {
  return memo + person.awardAge;
}, 0);
var averageAwardAge = totalAge / peopleWithAwardAge.length;

You can explore the complete example in the underscore.map.reduce folder from the source code for this chapter or by running it directly at http://bit.ly/1MMSOlc.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Learning UnderscoreJS
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon