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: 12 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
[...array].sort	1093.8 Ops/sec
array.toSorted	418.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two different methods for sorting an array of random numbers in JavaScript: the traditional `Array.prototype.sort()` method and the newer `Array.prototype.toSorted()` method.

### Options Compared

1. **`[...array].sort(compareFn)`**
   - This approach creates a shallow copy of the array using the spread syntax (`[...]`) and then sorts it in place using the `Array.prototype.sort()` method.
   - **Mechanism**: The `sort()` method sorts the elements of the array in place and returns the sorted array. The `compareFn` is a function that defines the sort order.

2. **`array.toSorted(compareFn)`**
   - This method directly sorts the array using `toSorted()`, which is a newer addition to the JavaScript language.
   - **Mechanism**: `toSorted()` also accepts a compare function but creates and returns a new sorted array without modifying the original array.

### Pros and Cons

#### `[...array].sort()`
- **Pros**:
  - Widely supported across all JavaScript environments, making it a safe choice for compatibility.
- **Cons**:
  - Modifies the array in place, which may lead to unintended side effects if the original array is still needed in its unsorted form.
  - Using the spread operator creates an intermediate array, which can be less efficient in terms of memory and performance.

#### `array.toSorted()`
- **Pros**:
  - Non-mutating: It doesn’t change the original array, which reduces the risk of side effects.
  - Can be more convenient when a non-destructive operation is desired.
- **Cons**:
  - Being a newer feature (introduced in ECMAScript 2022), it may not be supported in very old browsers or environments that do not implement the latest JavaScript specifications.
  - Potentially less optimal performance in environments with older JavaScript engines.

### Performance Results
The latest benchmark results show that `array.toSorted()` achieved **557.60 executions per second**, while `[...array].sort()` had **551.74 executions per second**. This indicates that `toSorted()` performs slightly better in this context, although the performance difference is marginal.

### Other Considerations
When deciding which method to use, it's essential to consider:
- Compatibility with the environments where the code will run. If you need to support legacy browsers, traditional `sort()` may be safer.
- The need for immutability. If avoiding side effects is critical (e.g., in functional programming), `toSorted()` is preferable.
- Depending on the specific use case, the performance difference may be negligible, so code readability and maintainability might take precedence.

### Alternatives
1. **`array.sort()` without copying**: If mutating the original array is not an issue, simply using `array.sort(compareFn)` will be the most straightforward approach.
2. **Using libraries**: Libraries like Lodash have their own sorting implementations which may provide additional features or optimizations.
3. **Custom Sorting Logic**: For more complex sorting scenarios, implementing a custom sorting algorithm (e.g., quicksort, mergesort) could be more efficient based on the specific data characteristics.

In summary, both sorting approaches have their merits, and the choice depends on the specific context in which they're used. The introduction of `toSorted()` provides flexibility for developers who wish to avoid side effects and ensure immutability in their code.

Related benchmarks:

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

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

Created: 9 months ago by: Guest

Jump to the latest result

[...array].sort

array.toSorted

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):