What is Underscore JS used for? 

Underscore JS is a useful javascript library that has various useful functions like map, filter, invoke, intersection, unions, etc. 

How to include Underscore JS in HTML

To install Underscore JS Either use

The CDN  Use the below script tag to include CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@latest/underscore-umd-min.js"> </script>

Or use Package Installation Following are the commands

• Node.js - npm install underscore
• Meteor.js - meteor add underscore
• Bower - bower install underscore

Now let us look at the first example, and know the various functions and uses of Underscore JS

What is Union in Underscore JS and When do we use it?

Union function of Underscore JS merges two arrays and removes the duplicate elements from the arrays. To understand this better let us look at a common example.

Place the code in index.html file

<h1>Example of an Union in Underscore JS</h1>
<div id="union"></div>

Place the code in script.js file

var array_of_fruits = ['Apple', 'Orange', 'Banana', 2, 3, 4];
var array_of_numbers = [1, 2, 3, 4, 5, 6, 7, 8];
var union = document.getElementById('union');
//Example of Union with dublicate elements
union.innerHTML=_.union(array_of_fruits, array_of_numbers);

The Output of the above example

The above example shows how Underscore JS Union is used to merge the arrays of objects

Intersection function in Underscore JS

The intersection function in Underscore JS will pull the common elements in an array. We can use the same example that I have used for Union

Place the code in index.html file

<h1>Example of an Intersection in Underscore JS</h1>
<div id="intersection"></div>

Place the code in script.js file

var array_of_fruits = ['Apple', 'Orange', 'Banana', 2, 3, 4];
var array_of_numbers = [1, 2, 3, 4, 5, 6, 7, 8];
var intersection = document.getElementById('intersection');
//Extracting common elements in an Array
intersection.innerHTML=_.intersection(array_of_fruits, array_of_numbers);

The Output of the above example

In the above example, we can see 2,3,4 are the common elements in both arrays. Hence the output of the intersection will be 2,3,4

What does the difference function do in Underscore JS?

The difference function will get only those elements in array_of_fruits that are not present in arrayˍof_numbers. You can check the example below as I have multiple elements in array_of_fruits but only the unique ones which are not present in array 2 are returned. 

Place the code in index.html file

<h1>Example of an Difference in Underscore JS</h1>
<div id="difference"></div>

Place the code in script.js file

var array_of_fruits = ['Apple', 'Orange', 'Banana', 2, 3, 4];
var array_of_numbers = [1, 2, 3, 4, 5, 6, 7, 8];
var difference = document.getElementById('difference');
difference.innerHTML=_.difference(array_of_fruits, array_of_numbers);

The Output of the above example

Using without function in Underscore JS

The without function in Underscore JS will return an array without the specified elements in the array. 

We can check the example with array_of_numbers. The code below will return elements without the specified elements

Place the code in index.html file

<h1>Example of an Without in Underscore JS</h1>
<div id="without"></div>

Place the code in script.js file

var array_of_fruits = ['Apple', 'Orange', 'Banana', 2, 3, 4];
var array_of_numbers = [1, 2, 3, 4, 5, 6, 7, 8]; 
//Elements will be returned without the specified elements
without.innerHTML=_.without(array_of_numbers, 4,6,8);

The Output of the above example

Now let's look into another set of Underscore JS functions. I will now discuss about first, last, initial, and rest functions in Underscore JS

Key points to note in each of these functions are:

• first: The function will return the first element in the array

• last: The function will return the last element in the array

• initial: The function will take 2 parameters, the first one will be the array, next one will be the number of elements. It will return initial elements leaving the last number of elements specified.

• rest: the rest function is similar to the initial function, It will take 2 parameters but instead of returning initial elements, it will return the rest of the elements

Place the code in index.html file

<h1>Example of first, last, initial and rest</h1>
<div id="first"></div>
<div id="last"></div>
<div id="initial"></div>
<div id="rest"></div>

Place the code in script.js file

var score =[100, 200, 300, 400, 500];
var first = document.getElementById('first');
var last = document.getElementById('last');
var initial = document.getElementById('initial');
var rest = document.getElementById('rest');
first.innerHTML=_.first(score);
last.innerHTML=_.last(score);
initial.innerHTML=_.initial(score,2);
rest.innerHTML=_.rest(score,2);

The Output of the above example

The code below will show you how to use the first, last, initial, and rest functions in Underscore JS. The output will be displayed after the code snippet. 

Next, we will take the pick, omit, keys, and values functions of Underscore JS. For this set of functions let us use a JSON object array. 

• pick: pick function in Underscore JS will pick only select the element with the mentioned key. The rest of the key-value pairs won't be returned. Check the example below.

• omit: omit function in Underscore JS will omit the specified key and value pair from the object. The rest of the elements will be returned except the specified one. 

• keys: keys function in Underscore JS will return all the keys in the selected object. Check the example below.

• values: values function in Underscore JS will return all the values of the object. 

Here is an example of the code as to how the functionality will work.