Underscore.JS - Environment Setup

In this chapter, you will learn in detail about setting up the working environment of Underscore.JS on your local computer. Before you begin with working on Underscore.JS, you need to have the access to the library. You can access its files in any of the following methods −

Method 1: Using Underscore.JS File in Browser

In this method, we are going to need Underscore.JS file from its official website and will use it directly in the browser.

Step 1

As a first step, go to the official website of Underscore.JS https://underscorejs.org/.

Observe that there is a download option available which gives you the latest underscore-min.js file UMD (Production) available. Right Click on the link and choose save as. Note that the file is available with and without minification.

Step 2

Now, include underscore-min.js inside the script tag and start working with Underscore.JS. For this, you can use the code given below −

<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>

Given here is a working example and its output for a better understanding −

Example

<html>
   <head>
      <title>Underscore.JS - Working Example</title>
      <script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "list">
	  </div>
      <script type = "text/JavaScript">
         var numbers = [1, 2, 3, 4];
         var listOfNumbers = '';
         _.each(numbers, function(x) { listOfNumbers += x + ' ' });
         document.getElementById("list").innerHTML = listOfNumbers;
      </script>
   </body>
</html>

Output

Method 2: Using Node.js

If you are opting for this method, make sure you have Node.js and npm installed on your system. You can use the following command to install Underscore.JS −

npm install underscore

You can observe the following output once Underscore.JS is successfully installed −

+ underscore@1.10.2
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilities

Now, to test if Underscore.JS works fine with Node.js, create the file tester.js and add the following code to it −

var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);

Save the above program in tester.js. The following commands are used to compile and execute this program.

Command

\>node tester.js

Output

1 2 3 4
Advertisements