Benchmark: [...array].sort vs array.toSorted

Script Preparation code:

var array = Array.from({ length: 10_000 }).map((_) => Math.random());
var compareFn = (a, b) => a - b

Tests:

[...array].sort
const result = [...array].sort(compareFn);
array.toSorted
const result = array.toSorted(compareFn)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
[...array].sort
array.toSorted

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
[...array].sort	586.7 Ops/sec
array.toSorted	597.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests two different methods for sorting an array in JavaScript: the traditional approach using the `sort()` method along with the spread operator (`[...]`), and the newer `toSorted()` method introduced in ECMAScript 2022.

### Testing Options

1. **`[...array].sort(compareFn)`**  
   This approach involves creating a shallow copy of the original array using the spread operator (`[...]`) and then sorting it in place using the `sort()` method, which is provided by the Array prototype. The sort operation is conducted based on the comparison function `compareFn`, defined as `a - b`, which sorts numbers in ascending order.

2. **`array.toSorted(compareFn)`**  
   This method also sorts the array based on the provided comparison function but does so without mutating the original array. The `toSorted()` method returns a new, sorted array while leaving the original array intact.

### Pros and Cons

#### `[...array].sort()`
- **Pros:**
  - Compatible with all versions of JavaScript environments, making it more universally applicable.
  - This method follows a more traditional approach that many developers are accustomed to.

- **Cons:**
  - Mutates the original array if not careful, which can lead to unintended side effects.
  - The use of the spread operator means it will always create a copy of the array before sorting, which can lead to increased memory usage, especially with large arrays.

#### `array.toSorted()`
- **Pros:**
  - Non-mutating: it does not alter the original array, which can help prevent side effects in your code and enhance readability.
  - Can be more efficient in terms of memory usage since it does not require a separate array copy operation (unless the implementation itself still creates copies internally).
  
- **Cons:**
  - This method is relatively new and might not be supported in all JavaScript environments, especially older browsers. Developers need to verify compatibility before using it in production code.
  - Since it is newer, there might be a smaller base of community knowledge and examples to reference compared to the traditional `sort()` method.

### Other Considerations
- **Performance Metrics:** In the benchmark results provided, the `array.toSorted` method executes slightly faster than the `[...array].sort()` method (approximately 939.67 executions per second vs. 916.91). However, this performance difference can vary based on the JavaScript engine, machine specifications, and the nature of the data being sorted.
  
- **Browser Compatibility:** Given that `toSorted()` is newer, developers must consider its compatibility across different browsers, particularly for projects requiring support for older versions of browsers.

### Alternative Approaches
Beyond these two methods, there are alternative sorting strategies in JavaScript, such as:
- **In-place sorting methods:** Using `array.sort()` directly, without the spread operator, which may be the simplest for simply sorting and using the original array.
- **Custom Implementations:** Writing custom sorting algorithms (e.g., QuickSort, MergeSort) for specific needs or patterns, allowing for tailored performance optimizations at the cost of increased implementation complexity.
- **Libraries:** Utilizing libraries like Lodash, which provide a variety of data manipulation utilities, including sorting capabilities with additional features.

### Conclusion
This benchmark provides a valuable comparison of two different sorting methods in JavaScript, highlighting their respective utilities, efficiencies, and suitable use cases. This is especially helpful for developers looking to enhance performance while writing maintainable and clear code.

Related benchmarks:

[...array].sort vs array.toSorted (version: 1)

Comparing performance of: [...array].sort vs array.toSorted

Created: one month ago by: Registered User

Jump to the latest result

[...array].sort

array.toSorted

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):