Alekya Dandu
By Alekya Dandu

Reduce Array method in JavaScript

Reduce Array method in JavaScript

Reduce Method in Javascript

The reduce() method iterates over the array from left-to-right and produces a single result according to the requirement.

The Syntax of Reduce method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Inline callback function

    array.reduce(function CallbackFunction(PreviousValue, CurrentValue, CurrentIndex, Array) { 

        //function implementation

     }, InitialValue)



// Arrow function

    array.reduce((PreviousValue, CurrentValue, CurrentIndex, Array) => { 

        //function implementation

    }, InitialValue)



// Callback function

    function CallbackFunction(PreviousValue, CurrentValue, CurrentIndex, Array) { 

        //function implementation

     }

    array.reduce(CallbackFunction, InitialValue)

Example

Taking an example of multiplying all the elements of an array:

Our first thought to implement this requirement is using for loop, the code will be as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

    let myarray=[2,4,6,8];  

    let mulresult=1;        //Variable to store the result

    for(let i=0;i<myarray.length;i++){   //For loop to iterate over the array

        mulresult=mulresult*myarray[i];   

    }

    console.log(mulresult); //Output: 384

We can implement the same requirement using reduce() in a much cleaner and simpler way!

This allows us to loop through the array’s elements, and at each iteration the current array value is multiplied with the result from the previous step, until we have reached the final element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

    let myarray=[2,4,6,8];

    // Using Inline callback function

    let inlineresult = myarray.reduce(function CallbackFunction(Previous, Current) {

            return Previous*Current;

        }); //Inital value is not defined 

    // inlineresult= 2*4*6*8 

    console.log(inlineresult); // Output: 384 



    // Using Arrow function

    let arrowresult = myarray.reduce((Previous, Current) => { 

            return Previous*Current;

        },1); //Intial value=1

    // arrowresult= 1*2*4*6*8 

    console.log(arrowresult); // Output: 384 



    // Using Callback Function

    const myreducerfn = (Previous, Current) => Previous*Current;

    let fnresult=myarray.reduce(myreducerfn,20); //Intial value=20

    // fnresult= 20*2*4*6*8 

    console.log(fnresult); // Output: 7680

Parameters

The parameters which the method takes are:

  1. InitialValue –

  • This parameter is OPTIONAL

  • If specified, the PreviousValue is assigned the InitialValue when the callback function is initially called.

  • If not specified, the PreviousValue is assigned the first element of the array.

  1. CallbackFunction – The function takes four arguments:

  • PreviousValue - The returned result from the previous step.

  • CurrentValue - The value of the current array element.

  • CurrentIndex - The current index value (OPTIONAL)

  • Selected Array - The array to traverse (OPTIONAL)