The reduceRight function condenses the elements of a specified array into a singular value by utilizing a reducer function. This reducer function operates on the accumulator, processing each element from the end of the array to the beginning.
Syntax
array.reduceRight(callback(accumulator,currentValue,currentIndex,array),initialValue)
Parameter
callback: It is the callback function that executes over each array element. It undertakes the following arguments:
- accumulator: It accumulates the initialValue or previously returned values by the callback function.
- currentValue: It holds the current array element in process.
- currentIndex: It is optional. It holds the current value's index, being in process.
- array: It is optional. It is the source array to which the elements belong.
initialValue: This parameter is optional and utilizes the provided value as the starting point for the accumulator in the initial invocation of the callback function.
Return
It reduces a single value as an output.
Points to note:
- When we invoke the callback function for the first time, the accumulator and currentValue can be one of the two values.
- When we provide the initialValue in the function, the accumulator will hold the value of the initialValue, and currentValue will hold the last element of the array.
- When no initialValue is supplied, then accumulator will hold the last array element, and currentValue will hold the second-last array element.
- When an empty array is present with no initialValue, it will throw an error known as TypeError .
- When it's an array of one element with no initialValue or an empty array with an initialValue, that element will be returned without invoking the callback function.
JavaScript Array reduceRight Method Example
Let's see some examples to understand better:
Example1
Here is a straightforward example demonstrating the use of the Array reduceRight function.
<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
var arr=[21,2,1,4];
var calc=arr.reduceRight(function(x,y){
return (x+y);
});
document.write(" The sum of the elements is: " +calc);
</script>
</body>
</html>
Output:
However, it is not evident from the above example whether the reduceRight method operates from right-to-left or left-to-right.
Example2
Below is an implementation that demonstrates how the reduceRight function operates.
<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
var arr=['t','p','i','r','c','s','a','v','a','j'];
var res=arr.reduceRight(function(right, left){
return (right+left);
});
document.write(" Output is: " +res);
</script>
</body>
</html>
Output:
Therefore, it is evident from the output provided above that the reduceRight function operates in a right-to-left manner.
While both the reduce and reduceRight functions condense the elements of an array into a singular value, they operate differently. The reduce function processes the array elements starting from the leftmost index and proceeds to the right. Conversely, the reduceRight function begins its operation at the rightmost index and works its way to the left.
Let's examine the implementation provided below for a clearer understanding.
Example
<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
var arr=['t','p','i','r','c','s','a','v','a','j'];
var res1=arr.reduceRight(function(pos1, pos2){
return (pos1+pos2);
});
var res2=arr.reduce(function(pos1, pos2){
return (pos1+pos2);
});
document.write(" The reduceRight() method output is: " +res1+"<br>");
document.write("<br> The reduce() method output is: "+res2+ "<br>");
document.write("<br> <center>The above outputs shows that both method works in different manners<center>");
</script>
</body>
</html>
Output:
We can explore numerous additional examples to gain a more profound understanding of how the method operates.