Posted By
Bajarangi soft ,
Posted On 25-09-2020
The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right).
The return value of the function is stored in an accumulator (result/total).
Note: reduce() does not execute the function for array elements without values.
Note: this method does not change the original array.
Syntax and Usage
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Parameter Values
function(total,currentValue, index,arr)->Required. A function to be run for each element in the array.
Argument Description
total Required. The initialValue, or the previously returned value of the function
currentValue Required. The value of the current element
currentIndex Optional. The array index of the current element
arr Optional. The array object the current element belongs to
initialValue ->Optional. A value to be passed to the function as the initial value
Let's Start
1.Subtract the numbers in the array, starting from the left:
Example(1)
<script>
var numbers = [175, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
return total - num;
}
</script>
Click the button to get the sum of the rounded numbers in the array.
<script>
var numbers = [11.5, 2.6, 1.1, 4.3];
function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>
Complete code of Array reduce Method In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Use Array Reduce Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>Use Array Reduce Method In JavaScript</h1>
</div>
<br>
<div class="well">
<button class="btn btn-primary" onclick="myFunction()">Click it</button>
<h1 id="demo"></h1>
</div>
<br>
</div>
</body>
</html>
<script>
var numbers = [11.5, 2.6, 1.1, 4.3];
function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>