Javascript

Learn and understand Javascript Array Reduce with example

Javascript Array Reduce Example – Welcome to another article in this series of “Javascript”. The topic of today’s article is “Javascript Array Reduce Example | Array.Prototype.Reduce() Tutorial” with examples.

The Array Reduce() method basically executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reduce() method iterated from left to right and executes the provided function for each value of the array.

Also Read: Javascript Array Map() with example

Javascript Array Reduce

What is Javascript Array Reduce?

The reduce() method is used to apply a function to each element in the array to reduce the array to a single value. The reduce() method executes a reducer function which the user provides, on each element of the array, resulting in single output value.

Syntax of the Javascript Array Reduce()

//Reduce Method
arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

How Javascript Array Reduce() Works

As we already mentioned that the Reduce() method takes a reducer function which in turns take four arguments which are as follows:

Callback – It is a function that takes four arguments to execute on each element in the array. It will not execute for the first element is there is no initialValue provided.

  1. Accumulator (acc) – The accumulator accumulates or you can say that collect all the callback’s return values.
  2. Current Value (cur) – The current element being processed in the array.
  3. Current Index (idx) – It is an optional argument that refers to the index of the current element being processed in the array. It starts from index 0 if an initialValue is provided, otherwise, it starts from index 1.
  4. Source Array (src) – It is also an optional argument that refers to the array on which the array reduce() was called upon.

InitialValue – It is an optional argument refers to the value to use as the first argument to the first call of the callback.

Javascript Array Reduce() with examples

Let’s see a quick demo example of how to use array.reduce() method.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

It must also be noticed that If initialValue is provided in the call to reduce(), then the accumulator will be equal to initialValue, and currentValue will be equal to the first value in the array.

Read also – What is Async Await in Javascript?

If no initialValue is provided, then the accumulator will be equal to the first value in the array, and currentValue will be equal to the second. Here is the demo for the same.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Example 1 – Sum all the values of an array using the array reduce() method

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// sum is 6

Example 2 – Sum of values in an object array using the array reduce() method

// app.js
let initialValue = 0;
let objArray = [
{x: 1},
{x: 2},
{x: 3},
{x: 4},
{x: 5},
]
let totalSum = objArray.reduce(function (total, currentValue) {
return total + currentValue.x;
}, initialValue);
console.log(totalSum);
//expected output - 15

Example 3 – Flatten an array of arrays using the array reduce() method

var flattenedArray = [[0, 1], [2, 3], [4, 5]].reduce(
function(accumulator, currentValue) {
return accumulator.concat(currentValue);
},
[]
);
// flattenedArray is [0, 1, 2, 3, 4, 5]

So, this is all about Javascript Array.reduce() method. Thanks for reading!

Leave a Comment