Sum and Product of Array elements using JavaScript

12 Sep, 2019
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:
Before click on the Button:
After Click on the Button:
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:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?