Difference Between array.reduce() and reduceRight() in JavaScript

The array.reduce() and array.reduceRight() are two array methods used for reducing an array to a single value. They are particularly useful for performing cumulative operations on the array elements.

Although they share similar functionality, their behaviour differs in the direction they iterate through the array. This article will explain the difference Between array.reduce() and reduceRight() in JavaScript.

What is array.reduce()?

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Syntax

array.reduce(callback(accumulator, currentValue, [currentIndex], [array]), [initialValue])

• callback: A function to execute on each element in the array, taking four arguments:
  • accumulator: The accumulated value previously returned in the last invocation of the callback, or the initial value, if provided.
  • currentValue: The current element being processed in the array.
  • currentIndex (optional): The index of the current element being processed in the array.
  • array (optional): The array reduce was called upon.
• initialValue (optional): A value to use as the first argument to the first call of the callback.

Features of array.reduce()

1. Left-to-Right Iteration: Processes the array from the first element to the last.
2. Accumulator: Utilizes an accumulator to hold the intermediate results of the reduction.
3. Initial Value: Allows specifying an initial value for the accumulator.
4. Flexible Callback: The callback function can take up to four arguments: accumulator, current value, current index, and the array itself.
5. Chainable: Can be used in a chain of array methods for complex operations.

Example: Performing operation with array.reduce().

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue)
         => accumulator + currentValue, 0);
console.log(sum);

Output

15

What is reduceRight()?

The reduceRight() method applies a function against an accumulator and each element in the array (from right to left) to reduce it to a single value.

Syntax

array.reduceRight(callback(accumulator, currentValue, [currentIndex], [array]), [initialValue])

• callback: A function to execute on each element in the array, taking four arguments:
  • accumulator: The accumulated value previously returned in the last invocation of the callback, or the initial value, if provided.
  • currentValue: The current element being processed in the array.
  • currentIndex (optional): The index of the current element being processed in the array.
  • array (optional): The array reduceRight was called upon.
• initialValue (optional): A value to use as the first argument to the first call of the callback.

Features of array.reduceRight()

1. Right-to-Left Iteration: Processes the array from the last element to the first.
2. Accumulator: Utilizes an accumulator to hold the intermediate results of the reduction.
3. Initial Value: Allows specifying an initial value for the accumulator.
4. Flexible Callback: The callback function can take up to four arguments: accumulator, current value, current index, and the array itself.
5. Chainable: Can be used in a chain of array methods for complex operations.

Example: Performing operation with reduceRight().

const numbers = [1, 2, 3, 4, 5];
const reversedString = numbers.reduceRight((accumulator, currentValue) 
			=> accumulator + currentValue, '');
console.log(reversedString);

Output

54321

Difference Between array.reduce() and reduceRight() in Javascript

Conclusion

Both reduce() and reduceRight() are powerful methods in JavaScript for reducing an array to the single value. Understanding their execution order and when to use each method based on the specific requirements of the application is crucial for the efficient array manipulation.