In this benchmark, two different approaches to sorting an array of random numbers in JavaScript are being compared: the traditional Array.prototype.sort() method and the newer method Array.prototype.toSorted().
Options being compared
array.sort(compareFn)array.toSorted(compareFn)
Description of sorting methods
Array.prototype.sort(compareFn):
- This method sorts the elements of an array in place and returns the sorted array.
- It takes a comparison function,
compareFn, which defines the sort order. In this benchmark, the comparison function sorts the numbers in ascending order.
Pros:
- It is a well-established method that has existed in JavaScript for a long time.
- Since it modifies the original array, there are typically fewer memory overheads compared to creating new arrays.
Cons:
- Because it mutates the original array, it can lead to unexpected side effects if the original array is needed later in its unsorted form.
- It may lead to debugging issues if part of the code relies on the original order of the array.
Array.prototype.toSorted(compareFn):
- This is a newer method introduced in ECMAScript 2022. It provides a non-destructive way of sorting an array, returning a new sorted array instead of modifying the original one.
- It also accepts a comparison function to dictate sort order.
Pros:
- It preserves the original array, making it safer to use in scenarios where the unsorted version is still needed. This is particularly valuable in functional programming styles or when working in environments that demand immutability.
- It can help avoid side effects, leading to cleaner and more maintainable code.
Cons:
- It may have higher memory overhead since it creates a new array to hold the sorted values.
- Being a newer feature, it may not be supported in all JavaScript environments, necessitating checks for compatibility.
Benchmark Results
The benchmark results show how many executions per second each method can handle in Chrome 131 on a Windows platform:
array.toSorted: 4195.77 executions per secondarray.sort: 3599.17 executions per second
From these results, array.toSorted performs faster than array.sort, highlighting its optimization during the new method's implementation.
Other Considerations
When choosing which method to use, a software engineer might consider:
- Mutability vs Immutability: If maintaining the original data is a priority,
toSorted may be preferable.
- Performance: In scenarios where performance is critical, careful profiling between the two methods should be done in the specific context of the application's needs.
- Browser Support: If building applications that must run on various environments, developers should verify that
toSorted is supported in their target browsers or fallback mechanisms.
Alternatives to Consider
Other sorting approaches in JavaScript include:
- Custom implementations of sorting algorithms (such as Quick Sort, Merge Sort) directly written in JavaScript. These can be tailored for specific data structures or scenarios.
- Using libraries such as Lodash or Underscore.js, which provide utilities for working with arrays and objects, including sorting capabilities.
- If working with larger datasets or requiring more advanced sorting features, looking into libraries specifically designed for performant data manipulation, like
Immutable.js, for immutable data structures.
In summary, this benchmark compares two sorting methods in JavaScript, highlighting their differences in mutability, memory overhead, and performance, providing a useful decision-making framework for engineers when choosing sorting techniques in their applications.
