codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Follow publication

JavaScript Arrays — Finding The Minimum, Maximum, Sum, & Average Values

Plug and play options for working with Arrays of Numbers

Brandon Morelli
codeburst
Published in
4 min readJan 2, 2018

--

In this article we’ll explore four plug and play functions that allow you to easily find certain values in an arrays of numbers. Specifically we’ll explore the following:

  • Finding the Minimum value in an Array.
  • Finding the Maximum value in an Array.
  • Finding the Average value of an Array.
  • Finding the Sum of all values in an Array.

Minimum value

  • Returns the minimum value in a given array.

How it works

Math is a built in object in JavaScript that contains certain methods useful for performing mathematical tasks. One of these methods is min().

Math.min() , as expected, returns the smallest of any set of given numbers. The problem with Math.min() is it expects each parameter to be input separately and cannot take an array of multiple numbers as input. To illustrate this, take a look at the code below:

Math.min(1,2,3,4)
// 1
Math.min([1,2,3,4])
// NaN

As you can see, Math.min() only works when each number is input as a separate parameter.

Because of this, we need to make use of the …spread operator. The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected.

When we use the spread operator within Math.min() it will expand, or spread out, our array and insert each variable as a separate parameter into Math.min()!

In other words: Math.min(...[1,2,3,4]) is the same as Math.min(1,2,3,4)

Finally, all I’ve done with the code above is turned it into a function expression utilizing arrow functions. If arrow functions scare you, simply remember that the two functions below are the same:

const arrMax = arr => Math.max(...arr);// IS THE SAME ASarrMax = function(arr){
return Math.max(...arr);
}

If you need a refresher on arrow function syntax, check out my previous article: JavaScript — Learn & Understand Arrow Functions.

Maximum value

  • Returns the maximum value in a given array.

How it works

This function is almost identical to the the Minimum value function explained above. Please scroll up for a read-through on how this function works. The only difference is this function makes use of the Math.max() method as opposed to the Math.min() method used above.

Sum of all values

  • Returns the sum of all values in a given array.

How it works

Again, don’t let arrow functions scare you. The code above is identical to this function:

arrSum = function(arr){
return arr.reduce(function(a,b){
return a + b
}, 0);
}

No matter how you write it, This function makes use of the JavaScript reduce() method to reduce our array to a single value. It does this by applying a function to each element in the array.

The function that we pass as the first parameter of the reduce method receives two parameters, a and b. In this code, a is our accumulator. It will accumulate our sum as our function works. b is the current value being processed.

The second parameter of the reduce method is the initial value we wish to use. We’ve set our initial value to zero which allows us to use empty arrays with our arrSum functions.

In other words, we are simply going to start with zero and one by one add each value of the array to our initial value until we’ve looped through the entire array. When done, the accumulator value will be returned

Average value

  • Returns the average of all values in any non-empty array.

How it works

This function is almost identical to the arrSum() function explained above. If you think about it, this makes sense. Finding the average value of a group of numbers is as easy as summing all of the numbers and dividing by the total number of numbers.

In this function, we first use reduce() to reduce all values in our array to a single sum. Once we have the sum we simply divide this value by the length of the array. The result is the average value which then gets returned.

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out: The Ultimate Guide to Learning Full Stack Web Development in 6 months.

If you’re working towards becoming a better JavaScript Developer, check out: Ace Your Javascript Interview — Learn Algorithms + Data Structures.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇

Sign up to discover human stories that deepen your understanding of the world.

--

--

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Brandon Morelli

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli

Responses (10)

Write a response