DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for πŸ”₯ Getting the largest number from an array
Dom Habersack
Dom Habersack

Posted on • Originally published at islovely.co

πŸ”₯ Getting the largest number from an array

Math.max() returns the largest of zero or more numbers passed to it. We can use the spread operator when passing an array to get the largest number from that array.

// get the largest number from a list of numbers
Math.max(69, 420, 108, 47)  // β‡’ 420

// passing an array instead of individual numbers returns `NaN`
const numbers = [69, 420, 108, 47]
Math.max(numbers)           // β‡’ NaN

// we get the expected result by spreading the array
const numbers = [69, 420, 108, 47]
Math.max(...numbers)        // β‡’ 420
Enter fullscreen mode Exit fullscreen mode

Top comments (13)

Collapse
 
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ • Edited on
[1, 2, 3, 4, 5, 6].reduce((a,b) => Math.max(a, b)) // EDIT: you can leave the extra argument out ;P
Enter fullscreen mode Exit fullscreen mode

In any sane programming language, you'd just do

[1, 2, 3, 4, 5, 6].fold(math.max)
Enter fullscreen mode Exit fullscreen mode

but alas, JS masterfully breaks every existing pattern except those coming from C.

Collapse
 
oliverradini profile image
OliverRadini

I think you're picking a hole in JS where there isn't one, except, perhaps, in the Math.max function. You could easily create a function which will work very happily with reduce:

const maxOfTwo = (a: number, b: number) => a > b ? a : b;

[1, 2, 3, 4, 5, 6].reduce(maxOfTwo);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
domhabersack profile image
Dom Habersack Author

Nice alternative! That is the way I used to do this before the spread operator. Works just as well.

You might want to safeguard this with Number.NEGATIVE_INFINITY as the initial value in reduce in case of an empty array. Math.max() also returns -Infinity when called without any parameters.

Thread Thread
 
oliverradini profile image
OliverRadini

That'd surely be worth doing, I really only added that code to give an example close to the code that was quoted.

Thread Thread
 
domhabersack profile image
Dom Habersack Author

Fair enough. πŸ‘

Collapse
 
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

I think you're picking a hole in JS where there isn't one

There definitely is. The problem here is a clash between two good intentions:

  1. Allowing more than two arguments in the max function
  2. Passing extra information to the combining function

The first one is unnecessary. It's only a bit more convenient to write max(a, b, c) than [a, b, c].fold(max), but it's still something that makes sense.

The second one, on the other hand, is a giant footgun. It only makes sense in the context of optimization, as using map first would result in one temporary array being created, but that should be optimized by the language runtime via stream fusion, not by the specification of the function. Ultimately it will just lead to more confusing code full of functions that do too many things at once, giving it a very procedural feel.

As for your solution, that's basically what I did, except that I wrote the function inline. Another solution would be:

const fold (arr, f) => arr.reduce((a, b) => f(a,b))

fold([1, 2, 3, 4, 5, 6], Math.max)
Enter fullscreen mode Exit fullscreen mode

Which, to prevent monkey-patching, sadly loses the method-syntax which makes chaining easier to read.

Thread Thread
 
oliverradini profile image
OliverRadini • Edited on

The first one is unnecessary. It's only a bit more convenient to write max(a, b, c) than [a, b, c].fold(max), but it's still something that makes sense.

I'm sure there are many situations where it's preferable to pass multiple arguments instead of constructing a whole new array to do max. I may find it preferable today to construct an array and use array methods to manipulate it, but those methods are, relatively speaking, very new additions to the language.

Regarding:

Passing extra information to the combining function

I've not yet used a language which doesn't allow providing a seed value into its reduction function. Haskell's foldr requires it. Cloure's reduce allows it. C#'s Aggregate allows it to be specified. I wouldn't want to work with a language that didn't allow me to specify a seed value this way.

I appreciate that I wrote basically the same code example that you did - I was trying to point out that there's not any issue at all with reduce in js, it just isn't called fold.

Thread Thread
 
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

I've not yet used a language which doesn't allow providing a seed value into its reduction function

The seed value is not the problem here. The combining function should take two arguments, but reduce passes 4, which is both dumb and the cause of this problem. I haven't seen another language that does this.

I was trying to point out that there's not any issue at all with reduce in js

Well, there is: it passes two extra arguments to the combining function, which no other fold function usually does.

Thread Thread
 
oliverradini profile image
OliverRadini

Ah I see your point now, sorry I misunderstood what you were saying originally, my bad.

It is frustrating, but really we're talking about edge cases here where you're looking to pass variadic functions into Array.reduce. In this instance we're hitting a problem due to the fact that, firstly, Math.max is variadic and secondly that Array.reduce passes additional arguments by default. Agreed that neither of those is ideal.

JS really isn't a language of ideals, though - it's a pragmatic scripting language, and, for all its flaws, it allows people to get things done quickly. For me a big part of being a good JS programmer is learning to live with its flaws, because if you obsess over them, you can't get very far with it.

Collapse
 
domhabersack profile image
Dom Habersack Author

I agree you could do the same with reduce if you’d prefer that. I prefer the shorter version, but that’s why it’s good there are many ways to do the same thing. I wouldn’t call JavaScript β€œinsane” because it does some things differently.

In your example, you probably want to use Number.NEGATIVE_INFINITY instead of 0 as the initial value in case there are only negative values in the array.

Collapse
 
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

In your example, you probably want to use Number.NEGATIVE_INFINITY instead of 0 as the initial value in case there are only negative values in the array.

You can just pass it a single argument. I tried that at first but changed it because I thought that was causing my error, but then I figured out it was actually reduce passing additional garbage to Math.max.

I wouldn’t call JavaScript β€œinsane” because it does some things differently.

It's not that it does things differently that makes insane. It's the fact that it does things differently in insane ways. Passing random stuff nobody wanted to the combining function in reduce is one such thing, but there's many many more.

Collapse
 
dtinth profile image
Thai Pangsakulyanont • Edited on

If you don't have to deal with large arrays (more than 100000 elements), then this approach works fine.

However if the array is large, please bear in mind that JavaScript runtimes have a limitation on the number of arguments that you can pass to a function. Yes, this include spread parameters.

If you pass more arguments than the limit, β€œMaximum call stack size exceeded” errors happen.

I have to find the maximum and minimum value of very huge arrays. For this I'm using

Math.max.apply(Math, my_array);
Math.min.apply(Math, my_array);

It works good on Firefox and IE, but on Chrome I always get Maximum call stack size exceeded errors... my current array has 221954 elements, and that's not my…

Collapse
 
vonheikemen profile image
Heiker

It looks like this works, too.

Math.max.apply(null, [69, 420, 108, 47]);
// => 420
Enter fullscreen mode Exit fullscreen mode

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post