Javascript | _.reduce() with Examples

The _.reduce() is an inbuilt function in JavaScript which is used to transform an array’s / object’s properties into one single value or is used to create a single result from a given list of values. When all the elements of the list are passed to the function/iteratee and no more elements remains then the _.each loop ends.
The iteratee function makes use of memorization, i.e., It is remembering the return value each time it calculates a value.

Syntax:

_.reduce(list, iteratee, memo)

Parameters: It accepts three parameters which are specified below-

  • list: It is the list containing some elements.
  • iteratee: It is the function which is used to take all the elements of the list and it also remember all the returned value.
  • memo: It is a value.

Return value: It returns the value of the last iteration is returned by the _.reduce() function.

JavaScript code to show the working of _.reduce() function

1) Passing a list of numbers to _.reduce() function: The ._reduce() function takes the element from the list one by one and do the specified operations on the code. Like here the operation is addition of the elements of the list. After adding all the elements, the reduce function ends. Here the starting value of memo is taken as ‘0’.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   
<head>
    <script>
                underscore.js/1.9.1/underscore-min.js" >
    </script>
    <script type="text/javascript"
         /1.9.1/underscore-min.js.map"></script>
   
    <script type="text/javascript"
          /1.9.1/underscore.js"></script>
</head>
   
<body>
    <script type="text/javascript">
          var sum=_.reduce([1, 2, 3, 4, 5], function(memo, num) {
               return memo + num; 
          });
          document.write(sum);   
    </script>
</body>
   
</html>

chevron_right


Output:

2) Passing and not passing the value of memo: If we are not passing memo variable’s value then it takes the value of the first element from the list. Otherwise it takes the mentioned value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   
<head>
    <script>
                underscore.js/1.9.1/underscore-min.js" >
    </script>
    <script type="text/javascript"
         /1.9.1/underscore-min.js.map"></script>
   
    <script type="text/javascript"
          /1.9.1/underscore.js"></script>
</head>
   
<body>
    <script type="text/javascript">
         var sum1 = _.reduce([1, 2, 3, 4, 5], function(memo, num){ 
               return memo + num;  
         0 });
         var sum2 = _.reduce([1, 2, 3, 4, 5], function(memo, num){ 
               return memo + num;  
         5 });
         document.write(sum1);
         document.write(sum);
    </script>
</body>
   
</html>

chevron_right


Output:

3) Finding out the value of num variable: The ‘num’ variable is a variable which stores the values of the list elements. Therefore since we are returning the value at the end when the function gets over, so, this implies that the list is also over. Therefore, the last element of the list will be printed.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   
<head>
    <script>
                underscore.js/1.9.1/underscore-min.js" >
    </script>
    <script type="text/javascript"
         /1.9.1/underscore-min.js.map"></script>
   
    <script type="text/javascript"
          /1.9.1/underscore.js"></script>
</head>
   
<body>
    <script type="text/javascript">
         var num=_.reduce([1, 2, 3, 4, 5], function(memo, num) {
              return num;
          });
         document.write(num);
    </script>
</body>
   
</html>

chevron_right


Output:

4) Applying logical operators in the _.reduce() function: From the above examples we are clear that in the value of memo is 1 and that of num is 5 (for this example only). So, we can apply the logical operator (>, <) to compare the values of num and memo and then print their values.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
   
<head>
    <script>
                underscore.js/1.9.1/underscore-min.js" >
    </script>
    <script type="text/javascript"
         /1.9.1/underscore-min.js.map"></script>
   
    <script type="text/javascript"
          /1.9.1/underscore.js"></script>
</head>
   
<body>
    <script type="text/javascript">
         var result=_.reduce([1, 2, 3, 4, 5], function(memo, num) {
               if(memo<num)
                    return memo;
               else
                    return num;
         });
    </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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.