Underscore.js | indexBy() with Examples

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 parameters contains the list of items.
  • Iteratee: 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <script type="text/javascript" src=
        </script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(_.indexBy(['HTML', 'CSS3', 'JS', 'PHP']));
        </script>
    </body>
</html>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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 sturucture to the _.indexBy() function. Console.log the final answer.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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 dispayed in the result.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:



My Personal Notes arrow_drop_up

I like to do coding in C++C and java programming languages HTML and CSS always intersts me Sharing knowleged is the best way according to me to increase ones knwoledge

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.