JavaScript Tutorials

JavaScript Array reduce()
Syntax & Examples

Array.reduce() method

The reduce() method of the Array class in JavaScript executes a user-supplied "reducer" callback function on each element of the array (from left to right), to reduce it to a single value.

Syntax of Array.reduce()

There are 2 variations for the syntax of Array.reduce() method. They are:

1.
reduce(callbackFn)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to execute on each element in the array. It takes four arguments: accumulator, currentValue, currentIndex, and array.

This method executes the callback function on each element of the array (from left to right) without an initial value, to reduce it to a single value.

Returns value of type Any.

2.
reduce(callbackFn, initialValue)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to execute on each element in the array. It takes four arguments: accumulator, currentValue, currentIndex, and array.
initialValueoptionalA value to use as the first argument to the first call of the callback.

This method executes the callback function on each element of the array (from left to right) with the specified initial value, to reduce it to a single value.

Returns value of type Any.


✐ Examples

1 Using reduce() method to sum the values in an array

In JavaScript, we can use the reduce() method to sum the values of an array.

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4, 5].
  2. We define a callback function sum that adds the accumulator and the current value.
  3. We use the reduce() method with sum to get the total of the array values.
  4. The result is stored in the variable total.
  5. We log total to the console using console.log() method to see the total sum of the array values.

JavaScript Program

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

Output

15

2 Using reduce() method to concatenate strings in an array

We can use the reduce() method to concatenate all strings in an array.

For example,

  1. We define an array variable strArr with elements ['Hello', ' ', 'world', '!'].
  2. We define a callback function concat that concatenates the accumulator and the current value.
  3. We use the reduce() method with concat to get the concatenated string.
  4. The result is stored in the variable message.
  5. We log message to the console using console.log() method to see the concatenated string.

JavaScript Program

const strArr = ['Hello', ' ', 'world', '!'];
const concat = (accumulator, currentValue) => accumulator + currentValue;
const message = strArr.reduce(concat);
console.log(message);

Output

Hello world!

3 Using reduce() method with an initial value

We can use the reduce() method with an initial value to multiply the values in an array.

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4].
  2. We define a callback function multiply that multiplies the accumulator and the current value.
  3. We use the reduce() method with multiply and an initial value of 2 to get the product of the array values multiplied by the initial value.
  4. The result is stored in the variable product.
  5. We log product to the console using console.log() method to see the product of the array values multiplied by the initial value.

JavaScript Program

const arr = [1, 2, 3, 4];
const multiply = (accumulator, currentValue) => accumulator * currentValue;
const product = arr.reduce(multiply, 2);
console.log(product);

Output

48

Summary

In this JavaScript tutorial, we learned about reduce() method of Array: the syntax and few working examples with output and detailed explanation for each example.