Table of contents
Introduction:
As JavaScript developers, we frequently utilize the sort() function to arrange arrays. However, when attempting to sort an array of numbers using sort(), we may come across unexpected behaviours. In this article, we will delve into a common issue that arises during array sorting and uncover the underlying mechanics. Additionally, I will provide detailed code examples to showcase alternative approaches for sorting arrays in descending order.
The Issue: Sorting Numbers with the Sort() Function
const myArray = [10, 5, 20, 2];
myArray.sort();
console.log(myArray);
Upon running this code, we anticipate the array to be sorted in ascending order. Surprisingly, the actual output might be [10, 2, 20, 5]. This unexpected behaviour can be attributed to the default sorting mechanism employed by the sort() function.
Understanding the behaviour:
According to the official documentation of JavaScript's sort() function, when no custom sorting function is provided, the default sort order is applied. This default sort order is based on converting the elements in the array into strings and then comparing their sequences of UTF-16 code unit values. Let's break this down step by step:
Converting elements into strings:
Before sorting, the sort() function converts each element in the array into a string. This means that even if the original elements were of different data types (e.g., numbers, objects, or strings), they will all be temporarily treated as strings during the sorting process.
Comparing UTF-16 code unit values:
Once the elements are converted into strings, the sort() function compares their sequences of UTF-16 code unit values. UTF-16 (Unicode Transformation Format, 16-bit) is a character encoding that assigns a unique numerical value to each character in most modern character sets. This includes characters from various languages, symbols, and emojis.
Sorting based on code unit values:
During the comparison step, the sort() function will sort the elements based on their UTF-16 code unit values. The specific algorithm used by the sort() function depends on the JavaScript engine and may vary between different environments.
The Unexpected Result:
By default, the sort() function converts elements into strings before performing comparisons. Consequently, when sorting an array of numbers, it converts them into strings and applies lexicographic sorting. This string-based sorting mechanism fails to produce the intended numerical order, leading to unexpected results.
For example, the string representation of "10" is considered greater than "2" because the character "1" has a higher Unicode value than "2". As a result, the sorted array may not reflect the desired numerical order.
Alternative Approach 1:
Using the reverse() Method One simple alternative is to sort the array in ascending order using the sort() method and then reverse the sorted array to achieve the descending order. The reverse() method can reverse the order of elements in an array without sorting them again.
const myArray = [10, 5, 20, 2];
myArray.sort((a, b) => a - b); // Sort in ascending order
myArray.reverse(); // Reverse the sorted array to get descending order
console.log(myArray);
In this approach, we first sort the array in ascending order using the custom comparison function (a, b) => a - b. After that, we call the reverse() method to invert the order, resulting in a sorted array in descending order.
Alternative Approach 2:
Using the Spread Operator and the sort() Method, This approach involves creating a new array using the spread operator and then sorting it in descending order. It keeps the original array unchanged and provides a sorted copy in the desired order.
const myArray = [10, 5, 20, 2];
const sortedArray = [...myArray].sort((a, b) => b - a);
console.log(sortedArray);
In this example, we use the spread operator ...myArray to create a shallow copy of the original array. Then, we sort this new array in descending order using the custom comparison function (a, b) => b - a. The original array myArray remains unchanged.
Alternative Approach 3:
Using the Intl.Collator Object The Intl.Collator object provides a powerful tool for sorting arrays with locale-sensitive string comparison. By specifying the numeric option, we can sort numbers correctly, even in different locales.
const myArray = [10, 5, 20, 2];
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
myArray.sort((a, b) => collator.compare(b, a));
console.log(myArray);
In this approach, we create a new Intl.Collator object and pass the numeric: true option to ensure proper numeric sorting. We then use the compare() method of the collator to sort the array in descending order.
Conclusion:
The sort() function in JavaScript can exhibit surprising behaviour when attempting to sort arrays of numbers. By default, the function converts the elements into strings for comparison, leading to unexpected results. However, as we've seen, there are alternative approaches to achieve the desired sorting order.
Whether you prefer using the reverse() method, the spread operator with sort(), or the Intl.Collator object, you now have multiple options to confidently tackle sorting challenges in JavaScript and achieve the desired results.