JS One-liners #1: Get the average of an array of numbers

JS One-liners #1: Get the average of an array of numbers

Ruben Conde's photo
Ruben Conde

Published on Oct 27, 2021

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

The inclusion of arrow function expressions in JavaScript has made it possible to adapt various everyday functionalities to code fragments that occupy a single line.

In this series of articles, we will take a closer look at these famous JavaScript one-liners to better understand them. This time we will talk about: Get the average of an array of numbers.

The code snippet in question is the following:

const getAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;

In order to analyze in depth what constitutes this code we will use its multi-line version. This will allow us to go step by step in the understanding of its behavior.

const getAverage = (array) => {
   const sum = array.reduce((prevVal, currVal) => prevVal + currVal);
   const average = sum / array.length;
   return average;
};

In this representation, I added variables to each stage to make it easier to go step by step. To begin with, it is necessary to understand how an average is obtained. In general, it is not difficult, and I dare say we have all done it at least once.

The formula for getting the average is as follows:

image.png

Or

image.png

Both formulas represent the same thing, that is: to obtain the average of a series of numbers you need to make the sum of all these and then this result divide it by the amount of numbers in the series. This is where we begin to analyze our function.

// const getAverage = (array) => {
   const sum = array.reduce((prevVal, currVal) => prevVal + currVal);
//    const average = sum / array.length;
//    return average;
// };

So, we see that, in JavaScript, to be able to perform the sum of the elements of an array (as long as they are numbers) we can use a function of the Array type, reduce. To know exactly how it works, we can visit the MDN documentation. In this we will find:

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

With this definition, we can understand more easily the function that we pass as parameter of reduce (Hey, it is also code in a single line!). We get as defined parameters the previous value and the current value, with this we return as result the sum of both.

At the beginning of the function loop the previous value will always be (as long as you don't define some number in the second parameter of the function reduce) the first element of the array, after the first pass this will be the result that we return.

When reduce finishes its pass through all the elements of the array, it will return the result of the sum of all the elements of this one. Now, this value is in our variable sum. With this we will pass to the second step of our function.

// const getAverage = (arr) => {
//    const sum = arr.reduce((prevVal, currVal) => prevVal + currVal);
   const average = sum / arr.length;
//    return average;
// };

Now that we have the result of the sum of all the elements of the array, we only have to divide it with the amount of elements in this one. To obtain how many elements exist in the array, we use the attribute of the Array type, length.

// const getAverage = (array) => {
//    const sum = arr.reduce((prevVal, currVal) => prevVal + currVal);
//    const average = sum / array.length;
   return average;
// };

Now we only have to return the value of average and that's it, our function will have achieved its goal. Then, to go from this:

const getAverage = (array) => {
   const sum = array.reduce((prevVal, currVal) => prevVal + currVal);
   const average = sum / array.length;
   return average;
};

To this:

const getAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;

We will take advantage (as discussed at the beginning) of JavaScript arrow function expressions. With these we can omit the return instruction, since by default they have this behavior, whatever it is the returned value.

Also, we could leave the name of the variables such as prevVal, currVal or array in the same way, and it would not change the result, but it will be up to each one to do it or not.

It is worth mentioning that, as almost everything, using one-liners has its advantages and disadvantages. It allows having a smaller code, but it could be difficult to debug with these if you want to watch every step.

Personally I like to use them from time to time, especially for simple calculations that are usually flawless. I think getting the average of an array of numbers is the perfect example of this is no longer a complex formula, and you are guaranteed to get the same result given the same arguments.

I hope you liked this article, and if you like to comment, I encourage you to do so. Remember that this will be a series of articles that I will try to bring regularly. So, until next time.