Like sorting your laundry? Or cleaning up a Lego spill into neat color-coded piles?<\/p>\n\n\n\n
Yeah, me neither. <\/p>\n\n\n\n
Because of its repetitive nature, sorting can be a bit of a chore at times. Unfortunately, sorting is as necessary for programming as it is in our daily lives. <\/p>\n\n\n\n
Fortunately for us, however, it\u2019s much easier to do as a JavaScript developer than it is in other areas of our lives.<\/p>\n\n\n\n
In this guide, we’ll look at:<\/p>\n\n\n\n
sort<\/code> method<\/li>- How to sort integer and string arrays<\/li>
- How to sort object arrays<\/li>
- How to sort non-ASCII characters<\/li>
- What Lodash is
- How to use Lodash’s
sortBy<\/code> method<\/li>- How to use Lodash’s
orderBy<\/code> method<\/li><\/ul><\/li>- A comparison of performance metrics for different sorting mechanisms<\/li><\/ul>\n\n\n\n
Organize your data using the JavaScript sort method<\/h2>\n\n\n\n
Sorting is the process of organizing data into meaningful groups so that it can be easily analyzed or processed. <\/p>\n\n\n\n
JavaScript, like most other programming languages, includes a built-in sort method with the following syntax:<\/p>\n\n\n
array<\/span>.sort<\/span>(compareFunction<\/span>);<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nWhere the array<\/code> is an array identifier containing the elements we want to sort, and the compareFunction<\/code> is an optional function to enhance our sorting logic further. <\/p>\n\n\n\nIf a compare function is not supplied, the array elements are sorted by first converting them to strings, which are then compared and sorted in ascending order.<\/p>\n\n\n\n
How the sort function works<\/h3>\n\n\n\n
The .sort()<\/code> method uses an algorithm called “in-place” to sort the elements in our array. This type of algorithm does not require extra disk space to sort the items but may require a small, non-constant amount of extra memory space to run. Once the sorting operation is complete, it will return the same array, now sorted, without creating a new array in the process.<\/p>\n\n\n\nHere\u2019s an example of utilizing sort()<\/code> on an array of strings:<\/p>\n\n\nlet<\/span> states = [\"Lagos\"<\/span>, \"New York\"<\/span>, \"Toronto\"<\/span>, \"Beijing\"<\/span>, \"Amsterdam\"<\/span>];\nstates.sort();\nconsole<\/span>.log(states);\n\n\/\/ returns: [\"Amsterdam\", \"Beijing\", \"Lagos\", \"New York\", \"Toronto\"]<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nHere, we can see that our strings are sorted using the latin alphabet’s<\/a> letter order. This means that “Aardvark” will come before “Zigzag”.<\/p>\n\n\n\nYou can also apply .sort()<\/code> to simple integers:<\/p>\n\n\nlet<\/span> luckyNumbers = [6<\/span>, 1<\/span>, 4<\/span>, 7<\/span>, 2<\/span>, 5<\/span>, 3<\/span>];\nluckyNumbers.sort();\nconsole<\/span>.log(luckyNumbers);\n\n\/\/ returns: [1, 2, 3, 4, 5, 6, 7]<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nHowever, when we try to sort through integers with larger values, our sort function appears to fail:<\/p>\n\n\n
let<\/span> luckyNumbers = [100<\/span>, 40<\/span>, 10<\/span>, 300<\/span>, 20<\/span>, 50<\/span>, 30<\/span>];\nluckyNumbers.sort();\nconsole<\/span>.log(luckyNumbers);\n\n\/\/ returns: [10, 100, 20, 30, 300, 40, 50]<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nSo, what is causing this? As previously stated, if a compare function is not provided in the .sort()<\/code> operation, all array elements are sorted by first converting them to strings and then comparing them. <\/strong><\/p>\n\n\n\nIn other words, while our .sort()<\/code> method continues to return an array of integers, we are actually attempting to sort the following array:<\/p>\n\n\n[\"100\"<\/span>, \"40\"<\/span>, \"10\"<\/span>, \"300\"<\/span>, \"20\"<\/span>, \"50\"<\/span>, \"30\"<\/span>]<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\nAnd alphabetically, “100” comes before “20”. We can quickly fix this by writing our own custom compare function instead of using JavaScript’s default.<\/p>\n\n\n\n
Use custom logic to sort your data by creating a compare function<\/h3>\n\n\n\n
The compare function takes two parameters, commonly named a<\/code> and b<\/code>, where a<\/code> is the first element for comparison and b<\/code> is the second. Because b<\/code> is the second value, it is commonly referred to as the comparator. This function then runs during the .sort()<\/code> method and assists it in determining which item in the array should come first in the results.<\/p>\n\n\n\nFurthermore, the compare function must be written in such a way that:<\/p>\n\n\n\n
- It returns a negative number if the first comparator should be sorted before the second.<\/li>
- It returns 0 (zero) if the comparators should be equal or maintain the same order.<\/li>
- It returns a positive number if the second comparator should be sorted before the first.<\/li><\/ul>\n\n\n\n