Sum and Product of Array elements using JavaScript

Last Updated : 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>          