Math max and min methods in javaScript
In core javaScript there is the Math max and Math min methods that can be used to find the highest and lowest numbers in a set of numbers. The methods work by passing the set of numbers as arguments, but it is also possible to use an array by making use of the apply function prototype method. The apply method can be called off of the Math.max or min method as it is a function prototype method, and then a null value can be given as the first argument, along with the array of numbers, more on that later.
The Math min and max methods can help save me from having to loop over the contents of an array to find the lowest or highest number in a array of numbers. The task of doing this does come up now and then when working out solutions for certain things that require the lowest and highest numbers in a collection of numbers. So lets take a look at some some examples, and a few additional use case examples of Math min and max.
1 — Math min and Max basics
In this section I will be going over a few basic examples of the Math.min, and Math max methods in the Math object of core javaScript. I will also be touching base on any and all other related topics in this basic section before getting into more advanced topics and any and all simple project examples. I will be keeping these example fairly simple but this is still not a post on making the first few steps when getting started with javaScriot, so I assume that you have at least some background with javaScript before hand.
— The source code examples here are on Github
The source code examples that I am writing about in this post can be found in my test vjs repository on Git hub along with the source code examples for all my other posts on native javaScript.
1.1 — Basic Math min example
The Math min and Math max methods work by passing numbers as arguments to the methods and then the smallest or largest number that is passed is returned by the method. So if I give the Math min method the numbers 3, 0, and -7 as arguments then the number -7 is what will be returned.
Although this simple example works out okay for what it is, when it comes to any kind of real code example such code examples will often involve an array of values, and likely never a set of static number literals. So lets look at some more examples of using these methods to get the lowest and highest numbers in a collection of numbers in javaScript.
1.2 — Using the apply function prototype method
If you are not familiar with the function apply prototype method yet as well as other such methods such as call and bind, now would be a good time to look into them. I will not be getting into these methods in depth here as I have written a post before hand in which I do so. However here is a simple example if using the apply function prototype method with Math min and max to get the lowest and highest numbers in an array of numbers.
1.3 — Array reduce method example
Of course there are a wide range of other ways to go about getting the min and max number in a series of numbers. I would say that the trick of using the apply function prototype method with the Math.min and Math.max methods is a nice quick way of doing so. However for this basic example I am going to start going over at least one if not more alternative ways of doing this sort of thing just for the heck of it. With that aid in this example I am also getting the min and max numbers in an array of numbers but I am using the Array reduce method as a means to do so.
2 — Range, as well as mean, median, sum
So there are many things than can be done with a set of numbers of course. However with the Math min and max methods one of the most common typical use case examples is to get the range of a set of numbers. For convenience in this section I will also be going over some examples of sum, mean, and median in this section also.
2.1 — Get the range of a set of numbers
So making a get range method with Math min, and Math max would involve just using the methods along with function apply to get the min and max numbers of a set of numbers. Then I just need to have the function return the max number less the min number. The returned result of the method would then be the range.
Getting the range of a set of numbers if often just one step in getting some other value. For example say that I want an array of numbers between the range of 320, based off of values of an array of numbers that are of a lower or higher range. I can use the range to loop over the source array of numbers and divide each value by the range of the source array, then multiply by 320 to get those values.
2.2 — Median, sum, and mean
So the range of a set of numbers is often just one value of interest along with a bunch of other typical values such as mean, median, and sum. There is having just one of these methods in a stand alone state of sorts, and then there is making what might be the beginnings of a utility library of sorts. For now lets just start out with some stand alone methods for all of these. I can then have a single method that will return an object that will give me everything there is that I would want with an array of numbers ore or less when it comes to just these few things at least.
There is more than one way to go about making a sum method, in this example I used a while loop to just loop over and add up the numbers. Other solutions might involve the use of the array reduce method, however getting into that might be off topic here. The thing about this is that I have a method that will give me all the basics when it comes to things of interest with a set of numbers, but not everything.
One additional thing is to have a normalized set of numbers for the array of numbers, so lets look at an example of that. In addition it might be nice to get into some actual examples that make use of all of this to do something interesting, so lets start getting into the good stuff with this.
3 — Number normalization example of Math.min and Math.max
One use case example of Math.min and Math.max might be to make a method that is used to normalize numbers relative to a range between the min and max number. This sort of thing is often used as a way to normalize points for example so they can then easy be scaled up by just multiplying the normalized value by a scale.
This can be done by using the Math.min method to get the lowest number, then Math.Max to get the highest, and with that the range of course. Once I have the range I can then use the array map method to map over the array of numbers and create and return a new array where each value is divided over the range.
4 — Working with an array of Objects
So now that we have figures out how to go about normalizing a set of numbers, lets see about working with an array of objects Say I have an array of points in the form of an array of objects where each object has an x and y property. I want to get the lowest and highest values for each axis in the set of points. For this one again the array map method can come in handy for getting all values of interest with that.
5 — Canvas example using Math.max, and Math.min
So maybe now it is time for a canvas example that makes use of the Math.max, and Math.min methods, along with everything else this I covered in this post and much more.
This canvas example will have a point.js module that will contain methods for generating and array of points. In addition it will have methods that make use of Math.max, and Math.min to help find the highest and lowest axis values for the x and y axis values of all the points. It will contain a while bunch of other methods that will help illustrate the was covered in this post when using it in a canvas example.
5.1 — The points.js module
So here is the points.js module that will be used to create the array of points. There are also a number of other public api methods for this module including a methods that is used to move an array of points, and also a methods that can be used to create a point object composed of the lowest x and y values that of course make use of Math.min, and Math.max.
5.2 — The draw.js module for drawing to a canvas element
So as with any of my canvas examples I made a draw.js module that will contain the draw methods that will be used to serve as a view for the model in this case an array of points created with the points module. With that said there is a draw method that will draw the current state of an array of points to a drawing context, but also many others that draw the background as well as the high and low points of a points array.
5.3 — Main.js and index.html
Now I just need a main.js file that will create and inject a canvas element into the html, and make use of the points.js module and draw.js file above.
Here in the main.js file I have a state object that contains an array of points created with the generate method of the points.js module. The update method will move the points by way of there current heading and pixels per second values. The seconds value must be passed to it with the state object.
There is also a main app loop method where I am calling the update method, as well as all the draw methods that I want to use to redner the current state of the state object.
Now for just a little html to tie everything together with this.
So when this canvas example is up and running it will result in a bunch of points moving around the canvas that will wrap back ground when the go out of bounds. On top of that I am also drawing points to the canvas that are the lowest x and y positions as well as the highest.
6 — Conclusion
So the Math.min and Math.max methods re nice little methods for getting the lowest and highest value of two or more numbers. They have to be given via arguments when calling it, but apply can be sued as a way to just go ahead and use an array of numbers. There are all kinds of other values that come to mind that can then be obtained when you have both the lowest and highest numbers such as a range, or a mean.
The math object in core javaScript has a whole lot more to offer of course that is also worth looking into more at some point or another. There are methods like the math atan2 method that will come up now and then when it comes to code examples that have to do with various things in trigonometry for example.
JS максимальное число
Чтобы найти максимальное число в JavaScript используйте Math.max . Смотрите пример:
Результат выполнения кода:
Максимальный элемент в массиве через apply
Хитрым путем можно найти максимальное значение массива, используя Math.max в связке с методом apply :
Результат выполнения кода:
Максимальный элемент в массиве через spread
Использование метода apply для нахождения минимального элемента в массиве считается устаревшим с появлением оператора spread. Давайте посмотрим пример:
How to Find the Min/Max Elements in an Array in JavaScript
There are multiple methods to find the smallest and largest numbers in a JavaScript array, and the performance of these methods varies based on the number of elements in the array. Let’s discuss each of them separately and give the testing results in the end.
Math.max()
For regular arrays you can use the Math.max with three dots:
Example:
Javascript Math.max find max in array
Using the three dots (…) makes it easy to call any function expecting arguments.
apply()
The Math.max function uses the apply() method to find the maximum element in a numeric array:
Example:
Javascript Math.max.apply find max element in array
The spread operator
The spread operator is also used to get the maximum of an array. It expands an array of numbers into the list of arguments, such as with Math.min() and Math.max() :
The standard loop
You can use the standard loop for tons of arguments as for loop doesn’t have size limitation:
Example:
Javascript the standard loop find max element in array
reduce()
You can also use the reduce() method for getting the number of items:
Example:
Javascript reduce() method for get the max ar min number of items
Maximum Size of the Array
The apply and spread methods had a limitation of 65536 which came from the limit of the maximum number of arguments. In 2019, the limit is the maximum size of the call stack, meaning that the maximum size for the numbers in case of apply and spread solutions is approximately 120000. The following script will calculate the limit for your particular environment:
When you test all the given examples above, the results show that the standard loop is the fastest. Then come the apply and spread methods, after them comes the reduce, which is the slowest one. When dealing with large arrays of more than 40 elements, the spread operator is considered a worse choice compared to other methods.
Math.max()
Метод Math.max() возвращает наибольшее из нуля или более чисел.
Синтаксис
Параметры
Описание
Поскольку метод max() является статическим методом объекта Math , вы всегда должны использовать его как Math.max() , а не пытаться вызывать метод на созданном экземпляре объекта Math (поскольку объект Math не является конструктором).
При вызове без аргументов результатом вызова будет значение — Infinity .
Если хотя бы один из аргументов не может быть преобразован в число, результатом будет NaN .