JavaScript: Sort Array of Numbers
Tutorial by Stefan Trost | Last update on 2023-11-23 | Created on 2012-06-08
JavaScript makes it easy for us, to sort an array. If we have an arbitrary array, it is enough to use the function sort() in the following way to sort the array:
var ArrA = ['D','A','C','B']; ArrA.sort(); alert(ArrA); // output: 'A,B,C,D'
However, there may occur problems, if we have an array of numbers. What happens if we apply the function from above to an array of numbers?
var ArrB = [120,30,22,4,60]; ArrB.sort(); alert(ArrB); // output: '120,22,30,4,60'
It seems that the numbers are not sorted correctly. The problem lies in the lexical sort algorithm of the sort() function. Sort() first looks at the first letter of the string that is passed to it and then arranges the strings corresponding to the next letters.
Accordingly, in the example with array ArrB, first comes the element 120, then 22 and then 30, because the first characters of these strings are 1, 2 and 3.
Sort array numerically
You can pass a function as a parameter to sort(), which specifies how elements will be sorted. That is exactly what we need now, to define ourself how two items of the array should be sorted. We take a look at the following examples:
var ArrC = [120,30,22,4,60]; //Example 1 ArrC.sort(function(a,b){return a-b}); alert(ArrC); // output: 4,22,30,60,120 //Example 2 ArrC.sort(function(a,b){return b-a}); alert(ArrC); // output: 120,60,30,22,4 //Example 3 function SortNum (a,b) { return a-b; } ArrC.sort(SortNum); alert(ArrC); // output: 4,22,30,60,120 ArrC.reverse(); alert(ArrC); // output: 120,60,30,22,4
In the first example, we pass a function as a parameter to sort(). The passed function must be able to accept two parameters. During the sorting process, this function will always be called with the two values that are being compared. The function can now return 0 or positive or negative values. If the returned value is greater than 0, then a should be higher sorted than b. If the returned value is less than 0, then b should be higher sorted than a. If the return value is 0, a is equal to b. And that is exactly what our function "return a-b" performs. So, we get back a sorted array in ascending order.
In the second example, we habe written "a-b" instead of "b-a". With this, the array turns around and we get back a descending sorted array
Example 3 shows an alternative way to accomplish the same thing: We have first defined the function "NumSort" and later on we are passing it. So, we do not have to write the function into the brackets and we can define it outside. Here is the advantage for very long functions, we are also calling for several times. The function reverse() can mirror an array completely. That is what we do after we have sorted the array with our NumSort() function to achieve our descending order in this example. So, we do not need to define a separate opposite function.
Arbitrary sort functions
The example shows: As a sort function, we can not only use simple functions like "a-b". Also, arbitrary other functions are possible, they only have to return 0 or a positive or negative value depending on whether the passed two values are equal, greater or less.
Let your imagination run wild and create the sorting function you need, for example also with if-nesting or any other code you need.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
JavaScript: Create and Use Arrays
Info | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
Lazarus: Load File as Byte Array and save Byte Array as File
Tutorial | 0 Comments
PHP: Remove all empty elements from string array
Tip | 0 Comments
HTML5: Upload Images with Client Side Resize
Tutorial | 9 Comments
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.