Sorting in Javascript sorted surprisingly?
Have you ever felt surprised after looking at the result of array.sort( ) in Javascript arrays? If your answer is “Yes, that’s why I am here”. Then you can lean back and relax for a second as you have parked on the correct lane. It was the same scenario for me when I had overcome this during my coding bootcamp process at https://thehackingschool.com. Now, you can just scroll down with a sigh of relief with no more play, let’s dive into the topic and sort it out.
As I mentioned, sorting an array in Javascript leaves us in an abrupt feel that, it resulted in a random number sequenced array than expected it to be (we usually expect a numerical ascending order). In fact, It is TRUE in its perception as it actually results in the sequence of ascending order according to the UNICODE values.
So, What’s a Unicode here?
Unicode is a Character encoding standard which is widely accepted all over the world. All keyboard characters like Mathematical notations, symbols and special characters are considered as ‘code points’ which range from 0 to 1114111 (0x10FFFF). It is because the computer needs to understand those characters by converting them into binary and storing them for further usage purposes.
In this mean process, the first 128 Unicode points are strictly as same as ASCII character encoding. For your reference, an easy compilation of the list of ASCII values, below code helps to generate valid ASCII values of a few important characters (8,9,10,12,13,32 to 127).
The above code is limited only for those characters that are allowed in an array format and can be sorted. Its output is an object format of ASCII values which are used very often.
Note: You can even get the complete chart of ASCII values by giving the range from 0 to 127 in a single ‘for’ loop.
Now that we have seen what is a Unicode and it’s importance in prioritizing the characters. Let’s do some individual console.log of arrays with different data types and match the points like why they are sorted so.
Type 1: Consider an array of 1 to 20 NUMBERS to sort -
Explanation: You can see that the result of the above code seems like a bit of disorder when we asked to print sorted values of regular number series from 1 to 20 which must be same as ‘Before Sorting’ values (expecting ascending order from 1 to 20).
This is because of the Unicode values of characters that would be taken under consideration from left to right (precedence check) individually. Starting from ‘0’ it looks for 1’s series as the next value, then preceded by 2’s series values, 3’s series values and so on… Hence the reason for an example of why 1200<20, 45<5 and so on in some arrays.
Way to remember: Consider a,b,d,e,f are numbers and [ab, def ] is an array to be sorted. The sorted array will have [ab, def ] iff (a < d ) and if (a = d ) it checks for next right value which must be (b < e) else [def, abc] when both conditions fail.
Solution: If you want to sort the array of numbers in ascending order properly, one of the ways is you can just use subtraction of two-variables function which compares and sorts in ascending order.
=> Consider an example array of numbers from 1 to 10.
Type 2: Consider an array of 1 to 20 numbers as STRINGS to sort -
Explanation: You can see that the result remains the same even for a stringified array of 1 to 20 as the previous result. Because of the reason ‘Unicode values’ as explained above.
Note: Precedence check is mandatory.
Type 2.1: Consider an array of alphabets as STRINGS to sort -
Explanation: You can see that the result remains the same before and after sorting the array because the type and reason remain the same as explained above.
Note: The order of the result remains the same even when the alphabets are capitalized. When mixed, remember that uppercase alphabets are sorted before the lowercase alphabets i.e., ( ‘A’ < ‘a’ ) or ( Uppercase < Lowercase ).
Type 3: Consider an array of a mixture of numbers, alphabets & symbols to sort -
Explanation: You can see a perfect mixture of all the characters in the above example array. The resulting array is nicely sorted according to its Unicode values by using precedence check.
Type 4: Consider Non-ASCII characters in an array of strings to sort-
Explanation: If you want to sort an array of Non-ASCII characters, make sure you use ‘array.localcompare’ while sorting in function. It deals with the characters which are other than English terminologies. Example: é, è, a, ä, etc.
For better understanding, let’s make a few memory points to sort.
In an array of mixed characters, the preference is given as follows —
- Sorted array preference usually be as shown below -
=> Symbols, numbers, stringified numbers, stringified uppercase letters, stringified lowercase letters.
- When its a string of mixed types from the above, the preference is given to the leftmost character value.
- Alphabets or symbols are not allowed in the array without being defined or stringified. If so, it results in an ‘Undefined’ value.
- The more zeros that you append to a stringified value from left, the less the value becomes. [Preference check]
=> Example: [‘001’, ‘0001’, ‘01’, ‘1’] sorted as [‘0001’, ‘001’, ‘01’, ‘1’]
- In case of all zeros in a string, the more the number of zeros, the big the value.
=> Example: [‘00’, ‘000’, ‘0000’, ‘0’] sorted as [‘0’, ‘00’, ‘000’, ‘0000’]
- When not stringified, zeros from the left gets cancelled if there are only zeros in the value.
=> Example : [000, 0010, 0100, 100] sorted as [0, 10, 100, 100]
- Preference check plays an important role from left to right while sorting the array values from character to character. Hence, so is the arrangement.
Hopefully, it’s assumed that this blog covered all the cases of ‘array.sort( )’. Please feel free to reach me at https://twitter.com/iakhilteja for any corrections or related queries.