Given an array and is the task to find the Sum and Product of the values of an Array using JavaScript.
Simple method: It uses a simple method to access the array elements by an index number and use the loop to find the sum and product of values of an Array using JavaScript.
Example 1: This example uses a simple method to find the sum of Array elements using JavaScript.
<!DOCTYPE html> <html> <head> <title> How to Find the sum of Values of an Array in JavaScript? </title> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> How to Find the sum of Values of an Array in JavaScript? </h3> <h4> ----Given Array----<br> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] </h4> <button onclick="myFunction()">Click</button> <p id="gfg"></p> <script> $(document).ready(function() { $("button").click(function() { function sum(input) { if (toString.call(input) !== "[object Array]") return false; var total = 0; for(var i=0;i<input.length;i++) { if(isNaN(input[i])) { continue; } total += Number(input[i]); } return total; } document.getElementById("gfg").innerHTML = "----Sum of Array----" + "<br>" + sum([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]); }); }); </script> </body> </html> |
Output:
Example 2: This example uses a simple method to find the product of Array elements using JavaScript.
<!DOCTYPE html> <html> <head> <title> How to Find the product of Values of an Array in JavaScript? </title> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> How to Find the product of Values of an Array in JavaScript? </h3> <h4> ----Given Array----<br> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] </h4> <button onclick="myFunction()">Click</button> <p id="gfg"></p> <script> $(document).ready(function(){ $("button").click(function(){ function product(input) { if (toString.call(input) !== "[object Array]") return false; var total = 1; for(var i=0;i<input.length;i++) { if(isNaN(input[i])){ continue; } total *= Number(input[i]); } return total; } document.getElementById("gfg").innerHTML = "----product of Array----" + "<br>" + product([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]); }); }); </script> </body> </html> |
Output:
- Before click on the Button:
- After Click on the Button:
Using reduce() method: The array 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 )
Example 1: This example uses array reduce() method to find the sum of values of an Array using JavaScript.
<!DOCTYPE html> <html> <head> <title> How to Find the sum of Values of an Array in JavaScript? </title> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> How to Find the sum of Values of an Array in JavaScript? </h3> <h4> ----Given Array----<br> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] </h4> <button onclick="myGeeks()"> Click Here! </button> <br><br> Sum: <span id="GFG"></span> <script> var arr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; function sumofArray(sum, num) { return sum + num; } function myGeeks(item) { document.getElementById("GFG").innerHTML = arr.reduce(sumofArray); } </script> </body> </html> |
Output:
- Before click on the Button:
- After Click on the Button:
Example 2: This example uses array reduce() method to find the product of values of an Array using JavaScript.
<!DOCTYPE html> <html> <head> <title> How to Find the product of Values of an Array in JavaScript? </title> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> How to Find the product of Values of an Array in JavaScript? </h3> <h4> ----Given Array----<br> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] </h4> <button onclick="myGeeks()"> Click Here! </button> <br><br> Product: <span id="GFG"></span> <script> var arr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; function productofArray(product, num) { return product * num; } function myGeeks(item) { document.getElementById("GFG").innerHTML = arr.reduce(productofArray); } </script> </body> </html> |
Output:
- Before click on the Button:
- After Click on the Button:
