JavaScript Array reduce() Method
Below is the example of Array reduce() method.
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
JavaScript Array reduce() Method
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color: green;"
>GeeksforGeeks</
h1
>
<
p
>
Click here to get the Subtract
of array elements from the left side
</
p
>
<
button
onclick
=
"myGeeks()"
>
Click Here!
</
button
>
<
br
><
br
>
Subtract: <
span
id
=
"GFG"
></
span
>
<!-- Script to use reduce method -->
<
script
>
var arr = [175, 50, 25];
function subofArray(total, num) {
return total - num;
}
function myGeeks(item) {
document.getElementById("GFG").innerHTML
= arr.reduce(subofArray);
}
</
script
>
</
body
>
</
html
>
- Output:
The arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.
Syntax:
array.reduce( function(total, currentValue, currentIndex, arr), initialValue )
Parameter: This method accepts five parameters as mentioned above and described below:
- function(total, currentValue, index, arr): It is the required parameter and used to run for each element of array. It contains four parameter which are listed below:
- total: It is required parameter and used to specify the initialValue, or the previously returned value of the function.
- currentValue: It is required parameter and used to specify the value of the current element.
- currentIndex: It is optional parameter and used to specify the array index of the current element.
- arr: It is optional parameter and used to specify the array object the current element belongs to.
- initialValue: It is optional parameter and used to specify the value to be passed to the function as the initial value.
Example 1: This example use reduce() method to return the sum of all array elements.
<!DOCTYPE html> < html > < head > < title > JavaScript Array reduce() Method </ title > </ head > < body style = "text-align:center;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < p > Click here to get the sum of array elements </ p > < button onclick = "myGeeks()" > Click Here! </ button > < br >< br > Sum: < span id = "GFG" ></ span > <!-- Script to use reduce method --> < script > var arr = [10, 20, 30, 40, 50, 60]; function sumofArray(sum, num) { return sum + num; } function myGeeks(item) { document.getElementById("GFG").innerHTML = arr.reduce(sumofArray); } </ script > </ body > </ html > |
Output:
Example 2: This example use reduce() method to return the round sum of all array elements.
<!DOCTYPE html> < html > < head > < title > JavaScript Array reduce() Method </ title > </ head > < body style = "text-align:center;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < p > Click here to get the sum of array elements </ p > < button onclick = "myGeeks()" > Click Here! </ button > < br >< br > Sum: < span id = "GFG" ></ span > <!-- Script to use reduce method --> < script > var arr = [1.5, 20.3, 11.1, 40.7]; function sumofArray(sum, num) { return sum + Math.round(num); } function myGeeks(item) { document.getElementById("GFG").innerHTML = arr.reduce(sumofArray, 0); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by JavaScript Array reduce() method are listed below:
- Google Chrome 3 and above
- Microsoft Edge 12 and above
- Mozilla Firefox 3.0 and above
- Safari 5 and above
- Opera 10.5 and above