JavaScript Array reduce() Method – javatpoint

[ad_1]

The reduce() method reduces the given array into a single value by executing a reducer function. The user implements the reducer function that works on every element present in the array.

Reducer Function

The reducer function is the user implemented code. It uses the following four arguments to perform its task:

Accumulator: It accumulates the return values of the array.
Current Value: Current element is the current value.
Current Index: The index of the current element is the value of the current index.
Source array: The array defined by the user for implementing reduce() method.

Syntax

<br /> arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue) <br />

Parameter

callback: The main is the callback function that executes for each element, excluding the first, if no initialValue is specified.

The callback function undertakes the following four arguments:

accumulator: It accumulates the return values of the callback function, returned in the last calling of the function.
currentValue: It is the value of the current element, which is being processing.
currentIndex: It is an optional argument that holds the index value of the current element which is being processed. If we provide the initial value, indexing will begin from 0. Else from 1.
array: It is also optional, which carries the elements on which the reduce() will work.

initialValue: It is the first argument value used in the first invocation of the callback function.

Return

It returns a single value as an output.

Points to note:

If we do not provide the initial value, the callback function will start its execution with index as 1, where it will skip the first index. Although, if intialValue is provided, execution will begin from 0.
In case of an empty array with no initialValue is supplied, it will throw a TypeError.
If the array is empty, but initialValue is provided, or if the array contains one element, but no initialValue is supplied, that element will return without invoking the callback function.

Thus, it is safe and good to provide the initial value.

JavaScript Array reduce() Method Example

Let’s implement some examples to understand better:

Example1

Here’s a simple example to sum up the array elements and display the output.

<br /> <html> <br /> <head> <h5> Javascript Array Methods </h5> </head> <br /> <body> <br /> <script> <br /> var arr=[2,3,1,5]; <br /> var a=arr.reduce(function (accumulator,currentValue) { <br /> return accumulator+currentValue; <br /> },0); <br /> document.write(“The sum of the array elements is: “+a); <br /> </script> <br /> </body> <br /> </html> <br />

Test it Now

Output:

JavaScript Array reduce() Method

Example2

Here’s an example to display the difference of the array elements using reduce() method.

<br /> <html> <br /> <head> <h5> Javascript Array Methods </h5> </head> <br /> <body> <br /> <script> <br /> var a=[30,15,5]; <br /> document.write(“The difference of the array elements is: “); <br /> document.write(a.reduce(reducer_func)); <br /> function reducer_func(net,n){ <br /> return net-n; <br /> } <br /> </script> <br /> </body> <br /> </html> <br />

Test it Now

Output:

JavaScript Array reduce() Method

Example3

Here’s an example to total the array elements using the arrow function.

<br /> <html> <br /> <head> <h5> Javascript Array Methods </h5> </head> <br /> <body> <br /> <script> <br /> var net=[3,2,5,1,7]; <br /> var calc=net.reduce( <br /> (accumulator,currentValue)=>accumulator+currentValue,0); <br /> document.write(“The total of the array elements comes out to be: “+calc); <br /> </script> <br /> </body> <br /> </html> <br />

Test it Now

Output:

JavaScript Array reduce() Method

Example4

When the array contain a single value only.

<br /> <html> <br /> <head> <h5> Javascript Array Methods </h5> </head> <br /> <body> <br /> <script> <br /> var net=[3]; //Array with one element. <br /> var calc=net.reduce( <br /> (accumulator,currentValue)=>accumulator+currentValue); <br /> document.write(“The total of the array element comes out to be: “+calc); <br /> </script> <br /> </body> <br /> </html> <br />

Test it Now

Output:

JavaScript Array reduce() Method

Thus, in presence of a single array element, there is no need to create a callback function. Also, because when an array contain a single element, the callback is not invoked.

We can perform several examples using the array reduce() method.

[ad_2]

Source link

Reducer Function

Syntax

Parameter

Return

Points to note:

JavaScript Array reduce() Method Example

Leave a Comment Cancel reply