Benchmark: JavaScript reverse vs [,..spread].reverse

Script Preparation code:

array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Tests:

Array.reverse()
array.reverse();
Array.toReversed()
[...array].reverse();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Array.reverse()	55629256.0 Ops/sec
Array.toReversed()	32258364.0 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 JSON compares the performance of two methods for reversing an array in JavaScript: `Array.reverse()` and the proposed `Array.toReversed()`, which utilizes the spread operator to create a new reversed array.

### Benchmark Overview

#### Test Cases
1. **Array.reverse()**: This method reverses the elements of the array in place, modifying the original array. 
   - **Pros**: 
     - Faster execution since it operates in place without the need to create a copy of the array.
     - Less memory usage since no additional array is created.
   - **Cons**: 
     - Mutates the original array, which can lead to unintended side effects if the original array is still needed afterward.

2. **Array.toReversed()**: This is not a standard JavaScript method (as of the last stable ECMAScript versions) but rather represents an alternative approach that involves spreading the original array into a new array and then reversing it.
   - **Pros**: 
     - Non-mutating: This method does not alter the original array, providing a new reversed version instead, making it safer in scenarios where immutability is important.
   - **Cons**: 
     - Slower performance compared to `Array.reverse()` due to the overhead of creating a new array and copying elements.
     - Increased memory usage since a new array must be allocated.

### Considerations and Alternatives
- **Performance**: The benchmark results show that `Array.reverse()` executes approximately 1.7 times faster than the alternative using `Array.toReversed()`. With `Array.reverse()` achieving about 55.6 million executions per second compared to 32.3 million for `Array.toReversed()`. Performance can greatly impact applications that require high-frequency data manipulation.

- **Use Cases**: 
   - If the original array does not need to be preserved, `Array.reverse()` is the optimal choice due to its efficiency. 
   - If data integrity and immutability are critical (e.g., in functional programming paradigms or in React state management), `Array.toReversed()` would be preferable despite the performance trade-off.

### Other Alternatives
- **Manual Implementation**: One could implement a custom reverse function, although it might not match the performance of `Array.reverse()`.
- **Libraries**: Utilizing libraries like Lodash or Immutable.js can provide methods that ensure immutability while offering additional utility functions that might optimize performance for some use cases.

### Conclusion
In summary, the benchmark effectively showcases the trade-offs between performance and mutability in JavaScript's array manipulation. Understanding these differences helps developers choose the right method based on the specific needs of their applications.

Related benchmarks:

JavaScript reverse vs [,..spread].reverse (version: 1)

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

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

Created: one year ago by: Guest

Jump to the latest result

Array.reverse()

Array.toReversed()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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