June 24, 2020

How to Get the Average of an Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get the average of an array of numbers in javascript. The average for a certain set of numbers is basically the sum of all numbers divided by a total number of values in that set.

If you are a beginner, then getting the average of the individual numbers is easy by simply using the addition operator (+) and division operator (/), but when these numbers are in an array, things can be a bit tricky.

There are multiple ways to get the average of numbers in an array, but I found reduce() method to be the perfect fit in such a scenario and this is something that we are going to use to accomplish our goal.

In the following example, we have an array of numbers. Upon click of a button, we will get the average of numbers and display that on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Get” and the h1 element has “Result” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the button element and the h1 element using the document.querySelector() method and stored them in btnGet and result variables respectively.

We have global variable numbers which holds an array of numbers.
We have attached a click event listener to the button element.
In the event handler function, we are calling reduce() method and providing 0 as the second parameter to act as our default accumulated value to start with. If you do not provide it, then reduce method will pick the first element from the array. In case, your array is empty and there is no default accumulated value, then you will get an error. That’s why it is important to provide some default accumulated value to start with.

The reduce() method returns the sum of the number and we are storing that in the total variable.
We are dividing total by the length of the array to get an average of numbers and storing that in the average variable.
We are displaying the average in the h1 element using the innerText property.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

let numbers = [10, 20, 30, 40];

btnGet.addEventListener('click', () => {
   let total = numbers.reduce((sum, current) =>  sum + current, 0);
   let average = total/numbers.length;
   result.innerText = average;   
});

You May Also Like: