Benchmark: JavaScript .sort() vs .toSorted ()vs [...].sort()

Script Preparation code:

array = Array.from({
    length: 50
}, (x, i) => (Math.round(Math.random() * (i + .01) * 1000)))

sortNumeric = (a, b) => (Number(a) - Number(b));

Tests:

Array.sort()
array.sort(sortNumeric);
Array.toSorted()
array.toSorted(sortNumeric)
[...Array].sort()
[...array].sort(sortNumeric);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.sort()
Array.toSorted()
[...Array].sort()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; CrOS x86_64 14695.114.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Chrome OS 14695.114.0

View result in a separate tab

Test name	Executions per second
Array.sort()	147144.2 Ops/sec
Array.toSorted()	0.0 Ops/sec
[...Array].sort()	65389.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 days ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of three different ways to sort an array in JavaScript: `Array.sort()`, `Array.toSorted()`, and the spread operator with `Array.sort()` (`[...array].sort()`). The goal is to determine which of these methods performs better in terms of execution speed.

### Benchmark Definition and Preparation

- **Benchmark Definition**: This benchmark is designed to test sorting a numeric array using different sorting methods provided by JavaScript.
- **Script Preparation Code**: The benchmark initializes an array of 50 random numbers. The sorting function `sortNumeric` is defined to sort numbers in ascending order:
  ```javascript
  sortNumeric = (a, b) => (Number(a) - Number(b));
  ```

### Test Cases

1. **Array.sort(sortNumeric)**: 
   - **Name**: `Array.sort()`
   - This method sorts the original array in place using the provided comparison function. The classic in-place sorting method modifies the original array and returns that same array reference.

2. **Array.toSorted(sortNumeric)**: 
   - **Name**: `Array.toSorted()`
   - This method is a relatively newer addition to JavaScript (introduced with ES2022) that returns a new sorted array without modifying the original array. In this benchmark, however, it produced a result of `0.0` executions per second, indicating that it may not be implemented or functioning correctly in the environment tested.

3. **[...array].sort(sortNumeric)**: 
   - **Name**: `[...Array].sort()`
   - This approach utilizes the spread operator to create a shallow copy of the original array, which is then sorted in place. This method also modifies the copied array and returns it, avoiding any impact on the original array.

### Performance Comparison

- **Pros and Cons**:
  - **Array.sort()**:
    - **Pros**: Fast, direct sorting of the array, typically requires less memory than creating a new array.
    - **Cons**: Modifies the original array, which may lead to unintended side effects if the original data is needed later.
  
  - **Array.toSorted()**:
    - **Pros**: Does not modify the original array, thus preserving data integrity and making it safer in scenarios where the original order needs to be retained.
    - **Cons**: The performance is uncertain due to the observed result of `0.0` executions per second, which suggests it may not work in the tested environment or across all browsers.
  
  - **[...array].sort()**:
    - **Pros**: Similar to `Array.sort()`, it sorts while preserving the original array since it operates on a copy. It’s useful when the original array state needs to remain unchanged.
    - **Cons**: Requires additional memory to create a new copy of the array and may be slower due to the overhead of copying.

### Other Considerations

- **Execution Results**: The performance results show that `Array.sort()` performs the best in terms of execution speed compared to the alternatives. The `Array.toSorted()` indicates a failure or poor support in the tested environment, making it less reliable for use.
- **Browser Compatibility**: The benchmark results were obtained using Chrome 102, and it’s important to recognize that other browsers might implement these methods differently, potentially affecting performance results.
- **Alternatives**: Beyond these methods, there are libraries such as Lodash that provide sorting utilities with additional features (like deep sorting etc.) and can be worth considering. However, using native sorting methods is typically recommended for performance unless advanced capabilities are needed.

In conclusion, if performance is crucial, `Array.sort()` might be preferred, but if the integrity of the original array must be preserved, it may be worth exploring `Array.toSorted()` (ensuring it’s supported in the target environment) or the spread operator method.

Related benchmarks:

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

Compare Javascript sort performance

Comparing performance of: Array.sort() vs Array.toSorted() vs [...Array].sort()

Created: 5 days ago by: Guest

Jump to the latest result

Array.sort()

Array.toSorted()

[...Array].sort()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 days ago):