Reducing a JavaScript Array Into a Value

The JavaScript array.reduce(callback, initialValue) method is used to reduce a JavaScript array to a single value by sequentially calling the callback function on each array element and storing the intermediate result. The second optional argument is the value used for the first call to the callback function. If no "initialValue" is passed, the first element of the array will be used. The reduce() method takes the value from the callback function and passes it as an argument to the next call to the callback function. In this JavaScript Array Reduce Example, we use the reduce() method to get the sum of the array elements. Click Execute to run the JavaScript Array Reduce Example online and see the result.
Reducing a JavaScript Array Into a Value Execute
let array = [5, 8, 3, 1, 6];

let reducer = (a, b) => a + b;

console.log(array.reduce(reducer));
Updated: Viewed: 593 times

JavaScript Array reduce() Method

The array.reduce(function(total, currentValue, currentIndex, array), initialValue) method in JavaScript executes the given function on per element of the array and returns the "accumulated" result. This is one of the most complex methods for working with arrays. The Array.reduce() method is more flexible; its purpose is to take an array and compress its contents into a single value. The reduce() method calculates a single value from an array and applies the callback function to each array element in turn, from left to right, while storing the intermediate result.

JavaScript Array reduce() Syntax
array.reduce(function(total, currentValue, currentIndex, array), initialValue)

Where:
  • function: a callback function that will be executed once for each array element in ascending index order. The function takes the following parameters:
    • total: acts as a return accumulator and matches the previously returned value of the callback function. The first time the callback function is called, the sum equals initialValue if one was provided or the first value in the array otherwise
    • currentValue: the value of the current element
    • currentIndex (optional): array index of the current element. It starts at index 0 if initialValue is specified, otherwise at index 1
    • array (optional): the array to which the current element belongs (which is being traversed)
  • initialValue (optional): the value used as the first argument of the first call for the callback function. If no initial value is specified, then the first element of the array will be used.
JavaScript Array Reduce Example
let array = ['One', 'Two', 'Three', 'Four', 'Five'];

let result = (a, b) => a + b;

console.log(array.reduce(result));

// output: OneTwoThreeFourFive

How to reduce an array from right to left?

You can use the reduceRight() method to call the callback in descending index order (right-to-left).

JavaScript Array reduceRight() Example
let array = ['One', 'Two', 'Three', 'Four', 'Five'];

let result = (a, b) => a + b;

console.log(array.reduceRight(result));

// output: FiveFourThreeTwoOne

See also