The Underscore.js is a JavaScript library that provides a lot of useful functions that helps in the programming in a big way like the map, filter, invoke etc even without using any built-in objects.
The _.indexBy() function is used to return a key for each element in the list and then returns an object with an index of each item. It gives the result according to the given property in the parameter. Also, it is similar to the groupBy() function but each item has a index in the starting. The array passed must have unique property (the property which needs to be passed as parameter). If the property is not unique then the output will be the last element that matches.
Parameters: This function accepts three parameters as mentioned above and described below:
- List: This parameter contains the list of items.
- Iterate: This parameter is used to hold the test condition.
- Context: This parameter is used to display the content.
Return values: The return value is the element along with their indexes( the property which are passed in the parameter).
Passing an array directly to the _.indexBy() function: The _.indexBy() function takes the element from the list one by one and do the just display it as it is in the result along with their indexes. After traversing and displaying all the elements along with indexes, the sort By function ends. Then just display the elements by doing console.log() this.
Example:
HTML
<html> <head> <script type="text/javascript" src= </script> </head> <body> <script type="text/javascript"> console.log(_.indexBy(['HTML', 'CSS3', 'JS', 'PHP'])); </script> </body></html> |
Output:
Passing a array with more than 1 property to _.indexBy() function: Passing an array with more than one property ( like here 3 properties) to the indexBy() function and just display the element 1 by 1 along with their indexes. The indexes will be chosen on the basis of the property given in parameter like here that property is ‘prop2’. So, the values of ‘prop2’ will be given as indexes in the result.
Example:
HTML
<html> <head> <script type="text/javascript" src= </script> </head> <body> <script type="text/javascript"> var arr = [ {prop1:"10", prop2:"07", prop3: "Geeks"}, {prop1:"12", prop2:"86", prop3: "for"}, {prop1:"11", prop2:"58", prop3: "Geeks."} ]; console.log(_.indexBy(arr, 'prop2')); </script> </body></html> |
Output:
Passing a structure with ‘date’ property to the _.indexBy() function: First, declare the array (here array is ‘orders’). The array contains one property as the ‘date’ which has dates in the format: ‘dd-mm-yy’. Then pass the array and the structure to the _.indexBy() function. Console.log the final answer.
Example:
HTML
<html> <head> <script type="text/javascript" src= </script> </head> <body> <script type="text/javascript"> var orders = [ { date:"30-60-90 Day", Name:"Kim", amount:415 }, { date:"30-60-90 Day", Name:"Kelly", amount:175 }, { date:"30 Day", Name:"Shelly", amount:400 }, { date:"30 Day", Name:"Sarvesh", amount:180 } ]; console.log(_.indexBy(orders, 'date')); </script> </body></html> |
Output:
Passing an array with ‘true’/’false’ as a property to the _.indexBy() function : Declare an array (like here ‘people’) with one property as the ‘true’/’false’. This is the property on which define index, i.e., now, the indexes will be either true or false. Also not that since there is repetition in this property as there are two values: true, false but there are four persons. So, only the last element which has the false (/true) will be displayed in the result.
Example:
HTML
<html> <head> <script type="text/javascript" src= </script> </head> <body> <script type="text/javascript"> var people = [ {"name": "sakshi", "hasLong": "false"}, {"name": "aishwarya", "hasLong": "true"}, {"name": "akansha", "hasLong": "true"}, {"name": "preeti", "hasLong": "true"} ] console.log(_.indexBy(people, 'hasLong')); </script> </body></html> |
Output:
