JavaScript find min/max from array of arrays

Let's say we have an array of users, but each user is also an array.

For the example, we'll use the following data.

const users = [
  ['Nicole', 31],
  ['Chris', 33],
  ['Yaatree', 2],
  ['Sanne', 29],
];

As you can see, each user array holds two objects:

• The user's name
• The user's age

How can we quickly return the user with the highest age and the user with the lowest age?

Let's find out together.

Finding the highest value from an array of arrays

First, we need to find a way to extract the data, and I thought the reduce method would be a great one for that.

The trick to using this method is to not pass the initial value. This way, we can only start counting from the actual array of items.

const highest = users.reduce((previous, current) => {
  return current[1] > previous[1] ? current : previous;
});

console.log(highest);
// [ 'Chris', 33 ]

Let's see how this works.

As a reminder, the reduce function loop over each array item takes two arguments.

• previous: The previous accumulated value
• current: The current looped item

We then check if the current item property 1 (meaning the age) is bigger than the current one.
If that is the case, we return the current item as it's higher. Else, we return whatever was in the previous value.

In our loop, it works like this:

• current = Nicole nothing exists, so Nicole becomes the highest
• current = Chris, Chris's age is higher than Nicole's, so Chris will become the returned value
• current = Yaatree, Chris is higher, so keep returning Chris as the highest
• current = Sanne, Chris is still higher, so keep Chris

We are ending in Chris being the highest value.

Finding the lowest value from an array of arrays

But what if we now take the same approach but want to find a lower age.

We can use the same reduce but swap the arrow.

const lowest = users.reduce((previous, current) => {
  return current[1] < previous[1] ? current : previous;
});

console.log(lowest);
// [ 'Yaatree', 2 ]

Note that we switched the > to a <.

Again to explain it more verbally, this is the flow of action:

• current = Nicole, nothing exists, so Nicole becomes the lowest
• current = Chris, Nicole is lower, so keep returning Nicole as the lowest
• current = Yaatree, Yaatree is lower so return Yaatree
• current = Sanne, Yaatree is lower so return Yaatree

The result is that we return Yaatree as the lowest.

Optimising the reduce method

I've decided to write the reduce function to make it easier for you to read.

However, this is unnecessary, and we can use the shorthand function.

const highest = users.reduce((prev, cur) => (cur[1] > prev[1] ? cur : prev));

const lowest = users.reduce((prev, cur) => (cur[1] < prev[1] ? cur : prev));

This might be a bit harder to read, but we remove the wrapping curly braces, which omit the use of a return statement as they return directly.

Dealing with an empty array

But what happens if our array is empty?

We will get the following error: TypeError: Reduce of empty array with no initial value.

That is because we didn't provide an initial value to the reduce method.
We can add an empty null value which would be our fallback.

For the reduce to work, we also need to evaluate starting with the previous value; this way, the other return is always the current.

const users = [];

const highest = users.reduce((previous, current) => {
  return previous?.[1] > current[1] ? previous : current;
}, null);

console.log(highest);
// null

I hope you enjoyed this article. Feel free to play around with this in the following CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Alex Lohr]

Wonderful post, Chris! Just one small trick that I found helpful when dealing with tuples (arrays with certain values in fixed positions): in order to make accessing them more legible and thus maintainable, use position variables (I usually prefix them with _ to avoid confusion):

// don't:
current[1]

// instead, do:
const _name = 0;
const _age = 1;

current[_age]

This way, you can immediately see the meaning of the accessed value. And don't be afraid of issues with the minification: terser will detect and replace them automatically if the result is smaller.

[peerreynders]

Perhaps more verbose (and less performant?)

const highest = users.reduce((previous, current) => {
  const [, pAge] = previous,
    [, cAge] = current;
  return cAge > pAge ? current : previous;
});

Though frankly

const userAge = ([,age]) => age;
// OR 
// const USER_AGE_INDEX = 1;
// const userAge = (user) => user[USER_AGE_INDEX];

const highest = users.reduce((previous, current) => {
  return userAge(current) > userAge(previous) ? current : previous;
})

i.e. deliver tuples with the requisite support functions (making the tuples effectively opaque; V8 function inlining will likely take care of the rest), much in the same way as you would add methods to a class.

[Alex Lohr]

As so often, I would say it depends.

The functions will result in slightly larger code, since they cannot be eliminated by terser. Even so, the performance impact is negligible, as you already remarked.

If you intend on exposing those tuples, it makes sense to use handler functions, but if only used internally, like in this case, I would still prefer named indices.

[Chris Bongers]

Super addition Alex, love this
Makes total sense to make it clear down the line 🤘

[Randall]

This is a good solution, but I tend to prefer sorting:

const highest = users.slice().sort((a, b) => b[1] - a[1])[0];

This is actually less efficient than the reduce method though (O(nlogn) vs O(n)) so I would use reduce if the array is VERY large (at least several millions elements).

[Mohammad Javed]

Another quality JavaScript post! Cheers!

It'll be one that I will come back to a few times!

[Chris Bongers]

Thanks a lot, glad you are liking them so much.