Learning Underscore.js

The examples presented in this chapter are hosted in web pages, and they can be executed by opening the index.html example file in your preferred web browser.

We start with a dataset that contains various bicycles and each one has a specific type. We want to process the dataset and get a count of bicycles for each bicycle type. The dataset is represented by an array of bicycle objects created using the object literal notation:

var bicycles = [{
      name: "A fast bike",
      type: "Road Bike"
    }, {
      name: "An even faster bike",
      type: "Road Bike"
    }, {
      name: "A springy bike",
      type: "Mountain Bike"
    }, {
      name: "A springier bike",
      type: "Mountain Bike"
    }, {
      name: "An all-terain bike",
      type: "Mountain Bike"
    }, {
      name: "A classy bike",
      type: "Urban Bike"
    }, {
      name: "A modern bike",
      type: "Urban Bike"
    }, {
      name: "A blue bike",
      type: "Children Bike"
    }, {
      name: "A pink bike",
      type: "Children Bike"
    }, {
      name: "A noisy bike",
      type: "Children Bike"
    }, {
      name: "A clown bike",
      type: "Children Bike"
    }];

Next, we will define a function that processes the dataset and creates an array of objects that contains the count of bicycles for a specific bicycle type:

var getBicyclesCountPerType = function() {
  var bicyclesCountPerType = [];
  bicycles.forEach(function(bicycle) {
    var isExistingType = false;
    bicyclesCountPerType.forEach(function(typeCount) {
      if (typeCount.type === bicycle.type) {
        typeCount.count += 1;
        isExistingType = true;
      }
    });
    if (!isExistingType) {
      bicyclesCountPerType.push({
        type: bicycle.type,
        count: 1
      });
    }
  });
  return bicyclesCountPerType;
};

The first highlighted function forEach is ES5 specific and enumerates the values of an array while executing a function for each element in the array. The forEach function is defined against Array.prototype, so it will be available to any Array instance.

The final code snippet for the first example relies on jQuery to append the results for each bicycle type as HTML content:

$(document).ready(function() {
  var outputContent = "There are " + bicycles.length + " bicycles:"
  var results = getBicyclesCountPerType();
  results.forEach(function(typeCount) {
    outputContent += "<br />";
    outputContent += " - " + typeCount.count + " of type: " + typeCount.type;
  });

  $("#output").html(outputContent);
});

Notice how we use forEach again to enumerate the final results. You can explore the example in the starter-example-with-ECMAScript5 folder from the source code for this chapter. In order to run this example, you need to open the index.html file in your preferred web browser. The example can also be executed directly at http://bit.ly/1WLzHuS.

You can view the example output in this screenshot:

In the previous example, we used two-nested forEach calls, and this approach seems inefficient under closer scrutiny. You cannot break a forEach loop, which means that you cannot stop after you processed the specific elements that were targeted. The second nested forEach call only needs to process a target element from the list rather than iterating the full list every time. Fortunately, Underscore has a function called find that iterates an array and stops when an element matching a specific criteria is found.

To use Underscore, we need to add a reference to a hosted version of the library in the head element of the example web page:

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

In the first example, we changed the function getBicyclesCountPerType() to use the Underscore find function:

var getBicyclesCountPerType = function() {
  var bicyclesCountPerType = [];
  bicycles.forEach(function(bicycle) {
    var currentTypeCount = _.find(bicyclesCountPerType, function(typeCount){
      return typeCount.type === bicycle.type;
    });
    if (currentTypeCount) {
      currentTypeCount.count += 1;
    }
    else
    {
      bicyclesCountPerType.push({
        type: bicycle.type,
        count: 1
      });
    }
  });
  return bicyclesCountPerType;
};

The code is terser and more efficient thanks to the find function, while the rest of the example remains unchanged. You can explore the full example in the starter-example-with-underscore.find folder from the source code for this chapter or by running it directly at http://bit.ly/1U7dVO4.

All Underscore functions are usually accessed through the Underscore global object named _. This name can be changed if it conflicts with other global variable names, and we will explore how to do this in Chapter 4, Programming Paradigms with Underscore.js. We will stick with the default Underscore global object name for most of the examples.

The full signature of the find function is _.find(list, predicate, [context]). This function accepts an array or an object as its first parameter list followed by a function parameter predicate that will be executed against each element of the array or against each property value of the object passed as the first parameter. The second parameter function predicate accepts an array element or an object property value and should return a Boolean value. If the return value is true, the _.find() function will stop iterating and will return the array element or the property value from the current position. The last optional parameter context is rarely used in this book and will be covered later on when we discuss scopes and the value of the this object. The find function signature was briefly explored here as it is used extensively in Underscore and subsequently in the rest of the examples.

The previous example introduced Underscore as an incremental improvement compared to the example before that. Among Underscore's 100+ functions, there is one that can replace the getBicyclesCountPerType() function completely and significantly reduce the number of lines of code. This function is countBy and its signature is _.countBy(list, iteratee, [context]). While its signature is similar with the one for the find function, the second function parameter iteratee is expected to return a string value representing a key for the iterated item. The key is used to group different elements of an array or different object property values depending on the list parameter type.

The countBy function returns an object with properties that have names taken from the keys supplied by the iteratee function. The value of such a property is the count of items from the list parameter that share the current property name as key.

The getBicyclesCountPerType() function invocation can be completely replaced with the _.countBy() function invocation:

var result = _.countBy(bicycles, function(bicycle){
    return bicycle.type;
});

The result object value has the following JSON representation:

{
    "Road Bike": 2,
    "Mountain Bike": 3,
    "Urban Bike": 2,
    "Children Bike": 4
}

The code tasked with displaying the example output needs to be changed accordingly. Instead of manipulating the array returned by the getBicyclesCountPerType() function it should manipulate the result object properties. We will use another Underscore function _.pairs(), which converts object properties to an array of elements where each element is a property name and value pair. Such a pair is a two-dimensional array itself, and you can see how it is declared and referenced in the highlighted sections from the following example:

$(document).ready(function() {
  var outputContent = "There are " + bicycles.length + " bicycles:"
  var result = _.countBy(bicycles, function(bicycle) {
    return bicycle.type;
  });
  _.pairs(result).forEach(function(typeCountPair) {
    var key = typeCountPair[0];
    var value = typeCountPair[1];
    outputContent += "<br />";
    outputContent += " - " + value + " of type: " + key;
  });
  $("#output").html(outputContent);
});

We have now dramatically reduced the size of the initial example by using Underscore functions while maintaining the same functionality. You can explore the full example in the starter-example-with-underscore.countBy folder from the source code for this chapter or by running it directly at http://bit.ly/1JdNwc6.

We started with one example that uses ES5 functions, followed by one that uses an Underscore function that is also an ES6 function. The final example uses another Underscore specific function that provides a higher level of data manipulation compared to built in JavaScript functions. You should find a lot more Underscore examples of this kind throughout the book.

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.

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:

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.

If we append the line, console.log(people.length);, at the end of the script section from the previous example found in the underscore.map.reduce folder, we will see the length of the array written in the console as 6. If we convert the example to use an immediately invoked function expression, the script section will look like the following code (with most of the code removed for brevity):

(function(){
  var people = […];
  $(document).ready(function() {…});
}());
console.log(people.length);

You can view the preceding example either online at http://bit.ly/1WNL31t or in the underscore.map.reduce-iife folder from the source code for this chapter.

I have highlighted the changes required to convert the code to use the immediately invoked function expression. Sometimes, a leading semicolon is used to prevent issues caused by the automatic semicolon insertions in JavaScript when your scripts get concatenated with other scripts. The enclosing parentheses around the highlighted self-executing anonymous function and before the last semicolon are the signature for these types of expression.

The example will still work as before, but the console output will have this message: Uncaught ReferenceError: people is not defined. Using this pattern, we made the people variable inaccessible for the global scope, while leaving it available for the IIFE function scope. The Underscore library is using an IIFE that contains all its source code and we will follow suit by ensuring the rest of the examples will use this pattern whenever applicable.

Next, we will explore a JavaScript pattern that also prevents exposing data to the global scope and is useful for safely sharing application code between different components in JavaScript.

The revealing module pattern solves the problem of hiding implementation details for JavaScript objects that expose property-like objects or functions to the global scope. The following example is a plain JavaScript one—no external library references are required:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Getting started - Revealing module pattern</title>
</head>
<body>
  <h1>See browser console for example output.</h1>
  <script>
    var revealingModule = (function() {
      var innerObject = 5;
      var innerFunction = function(value) {
        return innerObject + value;
      };
      return {
        outerObject1: innerFunction(1),
        outerObject2: innerFunction(2),
        outerFunction: innerFunction
      };
    }());
    console.log("outerObject1:" + revealingModule.outerObject1);
    console.log("outerObject2:" + revealingModule.outerObject2);
    console.log("innerObject:" + revealingModule.innerObject);
    console.log("outerFunction(3):" + revealingModule.outerFunction(3));
    console.log("innerFunction(3):" + revealingModule.innerFunction(3));
  </script>
</body>
</html>

You can view the example either online at http://bit.ly/1hUg2J5 or in the revealing-module-pattern folder from the source code for this chapter.

The first highlighted code represents the object created through the revealing module pattern, and you will notice that it relies on an IIFE to define itself. Using this pattern, all of the variables declared inside the IIFE are inaccessible to the outside scope, and the only visible properties are the ones returned in the object created in the last highlighted code snippet. The console output for this example is shown as follows:

outerObject1:6
outerObject2:7
innerObject:undefined
outerFunction(3):8
Uncaught TypeError: undefined is not a function

Any reference to the variables defined within the IIFE will be unsuccessful as demonstrated by the exception raised when the innerFunction was called within the global scope. You will see this pattern in action throughout this book, as we will use it in many examples. The Underscore library is using a version of this pattern and exposes all its global accessible functions though its _ object. The annotated Underscore source code available at http://underscorejs.org/docs/underscore.html is great for exploring how the library works behind the covers and is the recommended companion for this book.

Next, we will convert the underscore.map.reduce-iife example code to use the revealing module pattern and define a global accessible object called awardAgeCalculator. This object exposes all relevant functions that need to be accessible outside the IIFE scope as shown in the next code snippet:

var awardAgeCalculator = (function() {
  var getPeople = function() {
    return [{
      name: "Herta Muller",
      birthYear: 1953,
      awardYear: 2009
    }, {
       ...
    }, {
      name: "Patrick Modiano",
      birthYear: 1945,
      awardYear: 2014
    }];
  };

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

  return {
    getPeopleWithAwardAge: innerGetPeopleWithAwardAge,
    getAverageAwardAge: function() {
      var peopleWithAwardAge = innerGetPeopleWithAwardAge();
      var totalAwardAge = _.reduce(peopleWithAwardAge, function(memo, person) {
        return memo + person.awardAge;
      }, 0);
      return totalAwardAge / peopleWithAwardAge.length;
    }
  };
}());

You can find the example in the underscore.map.reduce-revealing-module folder from the source code for this chapter or you can execute it online at http://bit.ly/1h7eg6x.

I have highlighted the two functions that are defined in the local IIFE scope and cannot be accessed directly unless they are referenced as properties in the object returned by the awardAgeCalculator IIFE. Notice the functional style used in the example; apart from the awardAgeCalculator object, we use only functions throughout and don't have any variable inside awardAgeCalculator that preserves its value between any two function calls. We will continue to use this approach to define the core functionality of an example and here is how awardAgeCalculator is used to generate the example output as part of the same example:

$(document).ready(function() {
  var outputContent = "<br />Award age for people:";
  _.each(awardAgeCalculator.getPeopleWithAwardAge(), function(person) {
    outputContent += "<br />";
    outputContent += " - " + person.name + " was " + person.awardAge + " years old";
  });
  var averageAwardAge = Math.floor(awardAgeCalculator.getAverageAwardAge());
  outputContent += "<br /><br />" + "Average award age is " + averageAwardAge + " years old.";
  $("#output").html(outputContent);
});

I have highlighted the usages of the awardAgeCalculator functions, and we obtained a better separation of the code and simplified the example output section.

ES5 has introduced a new way to use a stricter variant of JavaScript called strict mode. This variant changes the behavior of the JavaScript runtime, and the following are some changes that occur in strict mode:

By including the line "use strict"; in your scripts, you can adhere to this JavaScript variant when using a modern ES5-compliant browser. If the script is loaded in an older browser, the statement is ignored and the JavaScript is parsed in non-strict mode. Strict mode can only be safely declared at the top of a function body. If it is declared in the global scope, it can cause issues when a strict mode script is concatenated with other non-strict scripts.

Using strict mode leads to safer, cleaner code with fewer errors. All examples throughout the rest of the book will use the patterns and practices discussed in this section.

The process of building modern JavaScript applications is greatly simplified by leveraging the rich ecosystem powered by Node.js.

Node.js is a software runtime for building server-side applications using JavaScript. Internally, it uses the V8 JavaScript engine that powers the Google Chrome web browser to compile JavaScript code to native code before executing it. It is based on an asynchronous event-driven programming model with non-blocking I/O operations using a single thread of execution. This makes it a great fit for real-time applications and high-throughput web applications. Node.js benefits from all the optimizations and performance improvements that Google Chrome has introduced since its first version and it runs on all major operating systems: Linux, Mac OS X, and Windows.

The Node.js installation comes with a built-in package manager called npm that contains a very large number of packages. There is an online npm packages repository available at https://www.npmjs.org/ that is used for installing or updating Node.js application dependencies.

For setting up the Node.js environment, we will target the Windows operating system first with Mac OS X and Linux covered next.

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

choco install -y node.js

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install node

sudo apt-get install -y curl
curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -

sudo apt-get install -y nodejs

node -v

With Node.js installed, we have access to its large repository of development tools and libraries provided through npm. We will use npm to install Bower, which is a package manager optimized for web sites and web applications. Bower is very similar to npm with the main difference being that Bower packages maintain a flat dependency tree as opposed to npm packages that maintain a deep nested dependency tree. For example, if two Bower packages have a dependency on Underscore, only one version of the Underscore package will be installed. If two npm packages have a dependency on Underscore, each package will install its Underscore package separately (although npm 3 will use flat dependencies by default similar to Bower).

To install Bower, you need to open a Command Prompt and execute this npm command:

npm install -g bower

Notice the -g npm command-line switch, which installs the package in the machine specific npm packages folder. By default, npm packages are installed relative to the current directory unless this command switch is specified. From now on, Bower will be available to all our examples regardless of the folder in which they reside.

Next, we will use the previous example found in the underscore.map.reduce-revealing-module folder from the source code for this chapter and transform it into a new example that leverages Bower for package management.

By running the following command in the example folder, we will create a bower.json file that holds metadata about the current project and its dependencies:

bower init

When running this command, there are a series of Command Prompt options that can be accepted with their default values. The values will be updated in the bower.json file. Next, we will install the Bower packages that match the required JavaScript library dependencies for jQuery and Underscore:

bower install jquery#2.1.4 --save
bower install underscore#1.8.3 --save

Notice the package name jquery followed by the version target #2.1.4 that ensures that we are using only a specific version of a Bower package rather than the latest version available when we omit the version target. The last command-line switch --save will persist the package information in the bower.json file allowing an easy restore for the Bower packages if they get deleted locally or they are not committed with the source code for the current project.

We now have the two JavaScript libraries installed in the current folder within a bower_components subfolder, which is the default Bower location for storing packages.

We can now change the JavaScript references in the index.html file to point to the two local Bower packages rather than the online hosted files:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>

I have also moved the inline JavaScript code into two separate files called awardAgeCalculator.js and index.js that separate the core functionality in the former from the output specific code in the latter. You can find the example in the underscore.map.reduce-with-local-dependencies folder from the source code for this chapter.

By leveraging Bower, we can quickly reference any JavaScript library that is needed while making it very easy to share the current project with other developers or even publish it to the Bower package repository.

We are approaching the end of the first chapter, and so far, we have not mentioned any tool for editing the code used in the example. Actually, we don't really have to as modern JavaScript development relies on a command-line-based tool chain usually based on Node.js. The workflow we established for exploring the examples from this book does not require a specific visual editor to be installed. You could just use the default operating system text editor and stop at that. However, it is worth mentioning the existing rich ecosystem of JavaScript visual editors and IDEs that is available if you want to benefit from additional functionality.

There are both commercial and free to use tools available, and they are separated into two categories: tools that have a main focus on Node.js and JavaScript-based development, and tools for general development that support Node.js and JavaScript through a plugin system. Note that we mentioned both Node.js and JavaScript as requirements for any editor or IDE as Node.js will be used extensively later on in this book.

Out of the Node.js and JavaScript-specific commercial tools, it is worth mentioning WebStorm IDE (more details at https://www.jetbrains.com/webstorm/) and Cloud9 online IDE that allows browser-based JavaScript development among other languages (more details at https://c9.io/). There is even a free Microsoft Visual Studio plugin called Node.js Tools for Visual Studio development (more details at http://nodejstools.codeplex.com/).

Out of the editors supporting JavaScript via their plugin system, I will mention the commercial editor Sublime Text (free trial available, more details at http://www.sublimetext.com/) and the free and open editor Atom (https://atom.io/). Atom itself was built using Node.js, has a rich plugin ecosystem, and is the editor used to author all the code from this book. To install Atom, you can follow the instructions available at http://bit.ly/1EiGYwn.

Of course there are many other tools available out there, but these are the ones that I personally found useful for learning how to build JavaScript applications.

You can execute all the examples from this book without having to install or configure anything just by using Cloud9 IDE (free registration required) at the project address https://ide.c9.io/alexpop/underscorejs-examples.

A typical Jasmine test that asserts the result of a trivial JavaScript operation will have the following code (with the Jasmine specific functions highlighted):

describe("A basic JavaScript add operation", function() {
  it("should be correct", function() {
    var result = 1 + 1;
    expect(result).toEqual(2);
  });
});

When running the test, its output should read A basic JavaScript add operation should be correct, forming a meaningful statement about the value delivered by the code being tested. The describe call is a Jasmine global function that will group one or more test specifications that are defined by the it function (which is also another Jasmine global function). Both functions have a test-related description as the first argument. The second argument is a function that defines the test suite in its body with the test specification (or the spec) defined in the it function. Test assertions use the Jasmine global function expect, which is chained with a helper function called matcher that will facilitate the test result evaluation.

There are a couple of built-in matcher functions available, such as toBe(), which checks whether the test assertion object and the expected object are the same; toEqual(), which checks whether the two objects are equivalent; and toBeDefined(), which checks whether the test assertion object is not undefined. You can also define your own custom matchers for more complex expectation checks. Jasmine allows you to set up and tear down data before and after a spec is executed through the global functions beforeEach() and afterEach().

Before creating the tests, we need to modify the awardAgeCalculator.js file that contains the code under test (or SUT—system under test) and ensure it is testable. A SUT is testable if it allows swapping out its dependencies, if it can be tested in isolation and does not depend on a shared or global application state.

For our example, we need to test that the two global accessible (or public) functions of the awardAgeCalculator object (the SUT) are producing the expected results when executed against specific data sets. Currently, we cannot easily swap out the default array of people used in the example and we need to change it by making the getPeople() function public and changing the rest of the functions to accept an input array as highlighted in the next code snippet:

var awardAgeCalculator = (function() {
  "use strict";

  var getPeople = function() {
    return [{
      name: "Herta Muller",
      birthYear: 1953,
      awardYear: 2009
    }, {
      ...
    }, {
      name: "Patrick Modiano",
      birthYear: 1945,
      awardYear: 2014
    }];
  };

  return {
    getPeople: getPeople,
    calculateAwardAgeForPeople: function(people) {
      return _.map(people, function(person) {
        return {
          name: person.name,
          awardAge: person.awardYear - person.birthYear
        };
      });
    },
    getAverageAwardAgeForPeople: function(people) {
      var peopleWithAwardAge = this.calculateAwardAgeForPeople(people);
      return _.reduce(peopleWithAwardAge, function(memo, person) {
        return memo + person.awardAge;
      }, 0) / peopleWithAwardAge.length;
    }
  };
}());

We also exposed the getPeople() function to the global scope for convenient access to the default data set. By making these changes, we have created a testable SUT where we can alter the input data for the two functions we plan to test. We can now write the tests by creating a spec\awardAgeCalculatorSpec.js file and using the following code:

describe("Given awardAgeCalculator", function() {
  describe(
    "when calling calculateAwardAgeForPeople()",
    function() {
      var people;
      var peopleWithAwardAge;
      beforeEach(function() {
        people = awardAgeCalculator.getPeople();
        peopleWithAwardAge = awardAgeCalculator.calculateAwardAgeForPeople(people);
      });
      it(
        "then the award age for the first person should be correct",
        function() {
          expect(peopleWithAwardAge[0].name).toEqual("Herta Muller");
          expect(peopleWithAwardAge[0].awardAge).toEqual(56);
        });
      it(
        "then the award age of the last person should be correct",
        function() {
          expect(peopleWithAwardAge[peopleWithAwardAge.length - 1].name).toEqual("Patrick Modiano");
          expect(peopleWithAwardAge[peopleWithAwardAge.length - 1].awardAge).toEqual(69);
        });
    });
  describe(
    "when calling getAverageAwardAgeForPeople()",
    function() {
      var people;
      var aveargeAwardAge;
      beforeEach(function() {
        people = awardAgeCalculator.getPeople();
        aveargeAwardAge = awardAgeCalculator.getAverageAwardAgeForPeople(people);
      });
      it("then the average award age should be correct", function() {
        expect(Math.floor(aveargeAwardAge)).toEqual(69);
      });
    });
});

The tests are defined within two nested describe functions and we used a beforeEach function to avoid code duplication when exercising the SUT. The expectations for the first set of tests are verifying that the person name and the award age are correct.

To execute these tests, we need to add Jasmine support to our example. We will use Bower to install Jasmine as a development package (a package that can be omitted when the current project is deployed to a target environment) through the following command:

bower install jasmine#2.3.4 --save-dev

We will change the default SpecRunner.html file provided with the standalone Jasmine distribution at http://bit.ly/1EhdgHT to reference the files from the Bower package together with the SUT file (the code file) and the test file as highlighted in the following code:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Jasmine Spec Runner v2.3.4</title>
  <link rel="shortcut icon" type="image/png" href="bower_components/jasmine/images/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="bower_components/jasmine/lib/jasmine-core/jasmine.css">
  <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
  <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
  <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/boot.js"></script>

  <!-- include source files here... -->
  <script src="bower_components/underscore/underscore.js"></script>
  <script type="text/javascript" src="awardAgeCalculator.js"></script>
  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/awardAgeCalculatorSpec.js"></script>
</head>
<body>
</body>
</html>

Notice that we referenced Underscore as a SUT dependency and we don't need any special test output code to display the results other than ensuring that all required JavaScript files are referenced in the SpecRunner.html file. You can find the example in the underscore.map.reduce-with-jasmine folder from the source code for this chapter.

To run the tests, we just need to open the SpecRunner.html file in a browser and we should see this output:

Jasmine tests can also be executed automatically through test runners such as Karma (http://karma-runner.github.io/) or Node.js build tools such as Grunt or Gulp. We will discuss these topics in Chapter 5, Using Underscore.js in the Browser, on the Server, and with the Database and Chapter 6, Related Underscore.js Libraries and ECMAScript Standards.