Skip to content
Related Articles

Related Articles

Improve Article
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>         

    Output:

    • Before click on the Button:
    • After Click on the Button:



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :