Benchmark: JavaScript reverse vs toReversed vs slice.reverse

Script Preparation code:

array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

Tests:

Array.reverse()
array.reverse();
Array.toReversed()
array.toReversed();
Array.slice.reverse()
array.slice().reverse();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.reverse()
Array.toReversed()
Array.slice.reverse()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Windows

View result in a separate tab

Array.reverse()

4.2M/s

Array.slice.reverse()

3.7M/s

Array.toReversed()

2.5M/s

View exact numbers

Test name	Executions per second
✓ Array.reverse()	4,151,974 Ops/sec
Array.slice.reverse()	3,738,384 Ops/sec
Array.toReversed()	2,545,077 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares the performance of three different methods for reversing an array in JavaScript: `Array.reverse()`, `Array.toReversed()`, and `Array.slice().reverse()`. Each method is tested to see how many times it can be executed per second, which gives us a measure of its performance efficiency.

### Benchmarked Approaches

1. **Array.reverse()**
   - **Definition**: This method reverses the elements of the array in place, meaning that the original array is modified to reflect the reversed order.
   - **Performance**: Based on the benchmark results, this method achieved the highest number of executions per second (approximately 46.7 million operations), indicating that it is the most efficient in terms of speed.
   - **Pros**: 
     - In-place modification avoids the overhead of creating a new array.
     - Fast performance for reversing small to moderately sized arrays.
   - **Cons**: 
     - It modifies the original array, which may not be desirable if the original order needs to be preserved.

2. **Array.toReversed()**
   - **Definition**: This method creates a new array and returns it with the elements of the original array in reverse order. It was introduced in ECMAScript 2022 (ES13).
   - **Performance**: The performance is the lowest among the three methods tested, with about 17.1 million operations per second.
   - **Pros**: 
     - Non-destructive: The original array remains unchanged, which can be important in functional programming contexts where immutability is favored.
   - **Cons**: 
     - Lower performance due to the creation of a new array, which incurs additional memory overhead and processing time.

3. **Array.slice().reverse()**
   - **Definition**: This method first creates a shallow copy of the original array using `Array.slice()` and then reverses the copied array in place with `Array.reverse()`.
   - **Performance**: This method had an intermediate performance of around 29.2 million operations per second.
   - **Pros**: 
     - Like `Array.toReversed()`, it preserves the original array, making it suitable for cases where you want to keep the original order intact.
   - **Cons**: 
     - Involves both creating a new array (using `slice()`) and then reversing it, which can lead to increased memory use and decreased performance compared to direct in-place reversal.

### Summary of Results
From the benchmarking results, it is evident that `Array.reverse()` is the most performant method for reversing arrays when in-place modification is acceptable. In contrast, if immutability is necessary, `Array.toReversed()` is preferred, albeit with a trade-off in performance. `Array.slice().reverse()` provides a middle ground but incurs the overhead of creating an extra array.

### Other Alternatives
While the three methods tested are conventional, other alternatives might include:
- **Using a loop**: A manual loop can be used to reverse an array if fine control over the process is needed. This can also lead to optimizations specific to the application’s needs.
- **Functional programming libraries**: Libraries like Lodash provide utility functions for array manipulation, which may have their own performance characteristics but often include added features (e.g., dealing with deep cloning).

Overall, selecting the right method for reversing an array in JavaScript largely depends on the specific performance requirements and constraints of the application being developed, particularly regarding whether or not the original array should remain unchanged.

JavaScript reverse vs toReversed vs slice.reverse (version: 1)

Compare Array.reverse() to Array.toReversed() performance wise.

Comparing performance of: `Array.reverse() vs Array.toReversed() vs Array.slice.reverse()`

Created: one year ago by: Guest

Go to the latest result

Array.reverse()

Array.toReversed()

Array.slice.reverse()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript reverse vs toReversed vs slice.reverse (version: 1)

Compare Array.reverse() to Array.toReversed() performance wise.

Comparing performance of: Array.reverse() vs Array.toReversed() vs Array.slice.reverse()

Created: one year ago by: Guest

Go to the latest result

Array.reverse()

Array.toReversed()

Array.slice.reverse()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.reverse() vs Array.toReversed() vs Array.slice.reverse()`