Benchmark: sort vs array.toSorted

Script Preparation code:

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

Tests:

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
sort
array.toSorted

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
sort	3599.2 Ops/sec
array.toSorted	4195.8 Ops/sec

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

LLMs can make mistakes. Check important info.

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

1. **`array.sort(compareFn)`**
2. **`array.toSorted(compareFn)`**

### Description of sorting methods

1. **`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.

2. **`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 second
- **`array.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.

Related benchmarks:

sort vs array.toSorted (version: 1)

Comparing performance of: sort vs array.toSorted

Created: one month ago by: Guest

Jump to the latest result

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):