# How to Get the Average of an Array in Javascript

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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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;
}```

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];