Benchmark: Reduce array3 - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var arr = Array(10_000).fill(1)

Tests:

Reduce with empty erray
arr.reduce((acc, x) => { acc.push(x); return acc; }, []);
Reduce with filled array
arr.reduce((acc, x, index) => { acc[index] = x; return acc; }, new Array(arr.length));
Reduce with filled array with null
arr.reduce((acc, x, index) => { acc[index] = x; return acc; }, new Array(arr.length).fill(null));
Reduce with new Array
arr.reduce((acc, x, index) => { acc[index] = x; return acc; }, new Array());
Reduce with var
const a = new Array(arr.length); arr.reduce((acc, x, index) => { acc[index] = x; return acc; }, a);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce with empty erray
Reduce with filled array
Reduce with filled array with null
Reduce with new Array
Reduce with var

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 131 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Reduce with empty erray	7457.4 Ops/sec
Reduce with filled array	8106.3 Ops/sec
Reduce with filled array with null	6770.7 Ops/sec
Reduce with new Array	6544.4 Ops/sec
Reduce with var	7601.0 Ops/sec

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

LLMs can make mistakes. Check important info.

In the benchmark titled "Reduce array3," the performance of various implementations using the JavaScript `Array.prototype.reduce` method is evaluated. This method is a powerful functional programming feature in JavaScript that processes an array and accumulates a single result based on a provided function. Here, we analyze the different cases tested as well as their pros and cons.

### Test Cases

1. **Reduce with empty array**
   ```javascript
   arr.reduce((acc, x) => {
       acc.push(x);
       return acc;
   }, []);
   ```
   - **Description**: This implementation initializes the accumulator as an empty array. It iterates over the input array `arr`, pushing each element into the accumulator.
   - **Pros**: It's clean and idiomatic JavaScript, clearly expressing the intent to gather results into an array.
   - **Cons**: Due to the `push` operation, there's an additional overhead of array growth when adding elements, which could impact performance compared to pre-allocated scenarios.

2. **Reduce with filled array**
   ```javascript
   arr.reduce((acc, x, index) => {
       acc[index] = x;
       return acc;
   }, new Array(arr.length));
   ```
   - **Description**: This approach initializes the accumulator as a newly created array of the same length as the input, allowing elements to be set directly by their index.
   - **Pros**: It is efficient because it avoids dynamic resizing—memory for the `acc` is allocated upfront.
   - **Cons**: The direct assignment may introduce a small performance overhead related to indexed assignment versus using methods like `push`, depending on the JavaScript engine's optimization.

3. **Reduce with filled array with null**
   ```javascript
   arr.reduce((acc, x, index) => {
       acc[index] = x;
       return acc;
   }, new Array(arr.length).fill(null));
   ```
   - **Description**: Similar to the previous case, but initializes the accumulator with `null` values.
   - **Pros**: Preparing the array with `null` values may improve readability and indicate that all indices are intentionally initialized.
   - **Cons**: The overhead of initializing every index with `null` may make this approach slower than just creating an empty array, although performance differences can depend on the JavaScript engine.

4. **Reduce with new Array**
   ```javascript
   arr.reduce((acc, x, index) => {
       acc[index] = x;
       return acc;
   }, new Array());
   ```
   - **Description**: This uses a newly instantiated empty array as the accumulator.
   - **Pros**: It's straightforward and leverages dynamic array growth.
   - **Cons**: Similar to the first case, it may reduce performance due to dynamic resizing of the array as new elements are added.

5. **Reduce with var**
   ```javascript
   const a = new Array(arr.length);
   arr.reduce((acc, x, index) => {
       acc[index] = x;
       return acc;
   }, a);
   ```
   - **Description**: This test pre-allocates the array outside the reduce call and uses that pre-defined array as the accumulator.
   - **Pros**: It minimizes memory allocation and resizing, which typically results in better performance.
   - **Cons**: The use of a variable (`a`) may introduce complexity in terms of variable lifecycle and scope.

### Performance Results

The benchmark results indicate the number of executions per second for each variant on Firefox 131, showing that:
- The fastest option was using a filled array with pre-allocation.
- The combination of pre-allocation and direct indexed assignment yielded better results than dynamic array growth methods.

### Summary of Alternatives

In addition to the approaches evaluated, other alternatives could involve using libraries like **Lodash**, which has functions like `_.reduce` that can offer extra features, like early exit from the `reduce` operation or handling specific edge cases. However, leveraging native JavaScript methods should generally suffice for most use cases.

### Conclusion

The different variations of the `reduce` method offer a diverse set of performance characteristics, where pre-allocation typically yields better results. When choosing an approach, consider the trade-offs between clarity, performance, and memory overhead based on the specific application context. Optimizations may vary based on JavaScript engine implementations, so it's advisable to conduct your benchmarks under targeted circumstances.

Related benchmarks:

Reduce array3 (version: 1)

Comparing performance of: Reduce with empty erray vs Reduce with filled array vs Reduce with filled array with null vs Reduce with new Array vs Reduce with var

Created: 29 days ago by: Guest

Jump to the latest result

Reduce with empty erray

Reduce with filled array

Reduce with filled array with null

Reduce with new Array

Reduce with var

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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