Javascript Array - reduceRight() Method

Tutorialsrack 29/10/2022 Jquery Javascript

In this article, you will learn about the javascript Array built-in method Array.prototype.reduceRight(). How does this method work in javascript? 

Array.prototype.reduceRight()

The Array.prototype.reduceRight() method executes a user-supplied "reducer" callback function on each element of the array, from right to left and it returns a single value.

array.reduceRight(callback(accumulator ,currentValue, currentIndex, array) ,initialValue);

This method takes 2 parameters as given below:

• callback: This parameter holds the function to be called for each element of the array. Each time the callback function executes, the returned value is added to the newArray. This function takes the mentioned parameters below:
• accumulator: This parameter holds the resulting from the previous call to callbackFn or, initialValue, if supplied.
• currentValue: This parameter holds the index of the current element within the array.
• currentIndex: This parameter holds the index position of currentValue processed in the array. 
• array(Optional): This parameter holds the reference to the original array.
• initialValue(Optional): This parameter holds the value that will be passed to the callback function on the first call. If initialValue is not provided, the last element acts as the initialValue on the first call, and the callback function won't execute on it.

The reduceRight() does not change the original array. And it executes a callback function once for each array element in order.

Here are some examples of the Array.prototype.reduceRight() method:

Example 1: Using reduce()  Method Without Initial Value

/*
In this example, you can see how the reduceRight() method behaves
without passing initialValue
*/
const arr = [40, 90, 160, 250, 360];

function reducer(previousValue, currentValue, index) {
  const returns = previousValue + currentValue;
  console.log(
    `previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`,
  );
  return returns;
}

arr.reduceRight(reducer);


/*
The callback would be invoked four times, 
with the arguments and return values in each call being as follows:
--------------------------Output---------------------------------


"previousValue: 360, currentValue: 250, index: 3, returns: 610"
"previousValue: 610, currentValue: 160, index: 2, returns: 770"
"previousValue: 770, currentValue: 90, index: 1, returns: 860"
"previousValue: 860, currentValue: 40, index: 0, returns: 900"


*/

In the above example, The array parameter never changes through the process - it's always  [40, 90, 160, 250, 360]. 

The value returned by the reduceRight() method would be that of the last callback invocation (900).

Example 2: Using reduce() Method With Initial Value

/*
In this example, you can see how the reduceRight() method behaves
when we passing initialValue
*/
const arr = [40, 90, 160, 250, 360];

function reducer(previousValue, currentValue, index) {
  const returns = previousValue + currentValue;
  console.log(
    `previousValue: ${previousValue}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`,
  );
  return returns;
}

arr.reduceRight(reducer, 100);


/*
The callback would be invoked five times, 
with the arguments and return values in each call being as follows:
--------------------------Output---------------------------------


"previousValue: 100, currentValue: 360, index: 4, returns: 460"
"previousValue: 460, currentValue: 250, index: 3, returns: 710"
"previousValue: 710, currentValue: 160, index: 2, returns: 870"
"previousValue: 870, currentValue: 90, index: 1, returns: 960"
"previousValue: 960, currentValue: 40, index: 0, returns: 1000"


*/

The value returned by reduceRight() method would be that of the last callback invocation (1000).

Example 3: Using reduceRight() with sparse arrays

The reduceRight() skips missing elements in sparse arrays, but it does not skip undefined values.

//reduceRight() skips the missing element from an array and return a single value
console.log([1, 2, , 4, 5, 6, null].reduceRight((a, b) => a + b));
// Output => 18

//reduceRight() does not skip the undefined element from an array 
//and return a NaN
console.log([1, 2, undefined, 4, 5, 6].reduceRight((a, b) => a + b));
// Output => NaN

I hope this article will help you to understand the javascript Array built-in method Array.prototype.reduceRight(). 

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!

Related Posts