Sum and Product of Array elements using JavaScript

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>              

chevron_right


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.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>      

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>        

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>         

    chevron_right

    
    

    Output:

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

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.