How to Find the Average of an Array Using JavaScript

Table of Contents

Finding the average of all the numbers in an array using JavaScript is quite easy. We will look at how we can do it using plain JavaScript and also how to to find the average using jQuery. The syntax for looping over an array is a little different so it is worth taking a look at both.

We will also use one of these techniques to build an application that can get the number of average pages from a series of books. We build the application towards the end of the post.

Using jQuery

Let’s first look at how we can find the array average using jQuery.

1. Looping over each item in the array

Calculate the average by looping over all the elements, counting up the total and keeping track of how many items you find. In the end you return the total divided by the number of items and that is your average.

// Just calculating it in the file
var someArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var total = 0;
var count = 0;

jQuery.each(someArray , function(index, value){
    total += value;
    count++;
});

console.log(total / count);

2. Moving our code to a function

can also put this functionality inside a function to make it more reusable.

// Using a method
var someArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function calculateAverageOfArray(array){
    var total = 0;
    var count = 0;

    jQuery.each(someArray , function(index, value)
    {
        total += value;
        count++;
    });

    return total/count;
}

console.log(calculateAverageOfArray(someArray));

3. Moving our function to a JavaScript class

We can also go one step further and wrap everything in a class. We can create a Calculator class which will have the functionality of calculating the average. We could also implement methods that would do other calculations, such as median, min, and max.

// Using a Class
class Calculator{
    constructor(){}

    static average(array){
        var total = 0;
        var count = 0;

        jQuery.each(array, function(index, value){
            total += value;
            count++;
        });

        return total / count;
    }
}

var someArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
console.log(Calculator.average(someArray));

If we would not have made the method in the Calculator class static we would have had to create an instance of the Calculator class in order to use it. You can copy and paste all the examples above into the console and they should return 8.

Using Plain JavaScript

We can use plain JavaScript to calculate the average as well. There are actually a couple of different ways we can do it. The first way is to use a for loop to iterate over the array, and like the other examples we will simply add up the total and divide by the number of items.

1. Using a for loop

// Using a for loop
someArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var total = 0;
var count = 0;

for(var i = 0; i < someArray.length; i++){
    total += someArray[i];
    count++;
}

console.log(total / count);

2. Using a foreach loop

The second way we can use regular JavaScript to calculate the average of an array is to use a forEach loop. It looks very much like the loop that we used with jQuery. We will go ahead and put this next example in a method.

// Using a for loop
someArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

function calculateAverage(array){
    var total = 0;
    var count = 0;

    array.forEach(function(item, index){
        total += item;
        count++;
    });

    return total / count;
}

console.log(calculateAverage(someArray));

AS when we used jQuery, you can move this code inside a class as well if you want to. We have now looked at how we can use JavaScript to find the average of an array, including using jQuery. You can do it straight in the file, in a method, or in a class if you wish.

When Might You Want to do this?

There are lots of times where you have your data stored in an array and you want to find the average. For example, if you want to use a library such as chart.js then you provide a lot of the values in the form of an array. You can also create different tooltips, and part of that tooltip might be the average of all the values.

Building an Application Calculating the Average

To better illustrate some of these techniques we will build a little application where we find the average of an array. We are going to create a book class, where the book has a number of pages, a title, and a number of chapters. We will then create an array of these books. Then we will create a function that will return the number of average pages of the books that we give it.

This application is a little different than some of the other examples that we have looked at, but it will still be doing the same functionality. We need to loop over all the books that we get, then get the number of pages from the object and add them up. In the end we will divide the total number of pages by the number of books. This way we get to to use objects that we create ourselves and not just numbers.

1. Start by Creating the Book Class

class Book {
    pages;
    chapters;
    title;

    constructor(pages, chapters, title){
        this.pages = pages;
        this.chapters = chapters;
        this.title = title;
    }

    getPages(){
        return this.pages;
    }

    getChapters(){
        return this.chapters;
    }

    getTitle(){
        return this.title;
    }
}

We now have our book class. The next step we will do is to create a few instances of the Book class.

2. Creating Instances of our Class

var bookOne = new Book(100, 12, "The great book");
var bookTwo = new Book(120, 5, "The Better book");
var bookThree = new Book(140, 4, "Learning JS");
var bookFour = new Book(150, 13, "Finding the average");
var bookFive = new Book(160, 22, "The great compute");

var arrayOfBooks = [bookOne, bookTwo, bookThree, bookFour, bookFive];

Before we continue lets calculate the average of all these books so that we know what we can expect as output after we have created our business logic.

(100 + 120 + 140 + 150 + 160) / 5 = 134

Now lets create our business logic where we will actually find the average number of pages from the given books.

3. Creating our Business Logic

function getAveragePages(books){
    var total = 0;
    var count = 0;

    for(var i = 0; i < books.length; i++){
        total += books[i].getPages();
        count++;
    }

    return total / count;
}

That is it for our logic. We will pass the array of Book objects to this function and it will return the average number of pages for us.

console.log(getAveragePages(arrayOfBooks)); // Prints 134

You now know everything you need in order to calculate the average of an array using JS. You should be able to do it using with regular JavaScript but also with jQuery. I challenge you to add another function that will return the average number of chapters so that you can get some practice.

If you want to learn more JavaScript then you should check out our guide on how to check if an object is empty or not.

Related Guides