JavaScript: Finding Minimum and Maximum values in an Array of Objects

Three potential solutions. But which is fastest?

Numbers. Photo by Paul Bergmeir

The Problem.

We have an array of 100,000 objects:

[
  {x: 1, y: 14830},
  {x: 2, y: 85055},
  {x: 3, y: 03485},
  {x: 4, y: 57885},
  // ...
]

Y values are randomized. How do we quickly find the minimum and maximum Y values in our array?

The ‘Why’.

Recently, I published an article on: How I built an Interactive 30-Day Bitcoin Price Graph with React and an API. One of the key ingredients you need to build a graph is a minimum and maximum value for each axis.

Consider this stupid simple graph below:

stupid simple graph

As you can see, we wouldn’t be able to plot a graph without a minimum and maximum X & Y value.

The X Values.

Since our X values increment sequentially, finding the minimum and maximum X value is very easy:

• Minimum: The first object’s X value
• Maximum: The last object’s X value

stupid simple graph

Our minimum X will always be the first piece of data. Our maximum X, will always be the last piece of data.

The Y Values.

Our Y values are random, so finding the minimum and maximum Y values is a little bit tougher. Again, consider our stupid simple graph:

stupid simple graph

Your minimum and maximum Y values can be anywhere. Sure they can be the first and last pieces of data, but they can also be 4th and 6th pieces of data like in our example above. We need a function that goes through each data set and finds the Y values.

Testing.

To determine which option is the fastest, we’ll create a large array of 100,000 objects (with random data) using the function below:

const data = []
for (let x = 1; x <= 100000; x++) {
  data.push({ x: x, y: Math.floor(Math.random() * (1000000)) })
}
// RETURNS THE DATA BELOW:
[
  {x: 1, y: 14830},
  {x: 2, y: 85055},
  {x: 3, y: 03485},
  {x: 4, y: 57885},
  // ...
]

The Solutions.

Below are three possible solutions. For the scope of my project I needed two separate function calls — one for the minimum Y value, and one for the maximum Y value. For other projects you could combine into just one function call.

1. Using reduce()

reduce() is a handy Array method that applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

A simple example is below.

let sum = [1, 2, 3].reduce((total, num) => total + num, 0);
// sum === 6
// [1, 2, 3].reduce((total, num) => total + num, 0)
// [1, 2, 3].reduce((0, 1) => 0 + 1)
// [2, 3].reduce((1, 2) => 1 + 2)
// [3].reduce((3, 3) => 3 + 3)
// 6

1. We create a variable named sum and set it equal to the returned value of our reduce() method.
2. The reduce() method works from left to right in our array. It adds each num (number) in the array to the total value. The 0 at the end of the callback indicates the initial value for total.
3. Starting with 1, the reduce() method adds 1 to the total then moves on to the next value in the array (1 + 0).
4. 2 is added to total (2 + 1).
5. 3 is added to total (3 + 3), and the value of total (6) is returned

With this in mind, here’s the code I used to get the minimum and maximum values of Y:

function getMinY() {
  return data.reduce((min, p) => p.y < min ? p.y : min, data[0].y);
}
function getMaxY() {
  return data.reduce((max, p) => p.y > max ? p.y : max, data[0].y);
}

Let’s walk through getMinY()

Using reduce() we check to see if the current Y value of the array is less than the minimum value stored in the reduce() function. If it is, we return the current Y value using p.y. If it’s not, the saved value of min is returned. Finally, we have an initial value (for the first iteration of the function) set to the first Y in the data set.

2. Using map(), Math, and the spread operator

A reader commented the following alternative:

function getYs(){
  return data.map(d => d.y);
}
function getMinY(){
  return Math.min(...getYs());
}
function getMaxY(){
  return Math.max(...getYs());
}

1. We start with a function that gets all of our Y values so we don’t have to deal with Objects. Using the built in Array.prototype.map() function, we take all of our Y values and insert them into a new Array of Numbers.
2. Now that we have a simple Array of numbers, we use Math.min() or Math.max() to return the min/max values from our new Y value array. The spread operator allows us to insert an array into the built in function.

Note — If you’re interested in learning more about the spread operator, check out this article: JavaScript & The spread operator

3. Why not both?

This leads to a middle ground solution where we use both reduce() and Math.min() & Math.max():

function getMinY(){
  return data.reduce((min, b) => Math.min(min, b.y), data[0].y);
}
function getMaxY(){
  return data.reduce((max, b) => Math.max(max, b.y), data[0].y);
}

Option 3, as you can see, is very similar to option 1. The only difference is we’ve replaced p.y < min ? p.y : min with Math.min(min, b.y). These two code snippets do the exact same thing.

The Fastest Option?

I personally think the third solution is the most elegant and easiest to read.. but unfortunately it’s not the fastest solution. I used jsperf to test the performance of all three solutions:

• Option 1 is by far the fastest.
• Option 2 is ~87% slower than Option 1.
• Option 3 is ~57% slower than Option 1.

Link to full test results.

If speed is all you’re after, a different solution out preforms all three of the above. A single function with a for loop is twice as fast as option number one above:

function findMinMax(arr) {
  let min = arr[0].y, max = arr[0].y;

  for (let i = 1, len=arr.length; i < len; i++) {
    let v = arr[i].y;
    min = (v < min) ? v : min;
    max = (v > max) ? v : max;
  }

  return [min, max];
}

Want more React?

Learn to build complete web applications with React: 3 Best React JS Courses

What do you think?

Got a different solution? Think one solution is better than the others? Let me know here in the comments or on Twitter.

I publish a few articles and tutorials each week, please consider entering your email here if you’d like to be added to my once-weekly email list.

Check out my recent articles:

• How I built an Interactive 30-Day Bitcoin Price Graph with React & an API
• And when your ready to really learn to build cool things, check out my Best Courses for Learning Full Stack Web Development

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