Benchmark: Reduce array2 - 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) => { acc.push(x); return acc; }, new Array(arr.length));
Reduce with filled array with null
arr.reduce((acc, x) => { acc.push(x); return acc; }, new Array(arr.length).fill(null));

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce with empty erray	20317.7 Ops/sec
Reduce with filled array	6474.6 Ops/sec
Reduce with filled array with null	6805.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark named **"Reduce array2"** evaluates the performance of the `Array.prototype.reduce()` method in JavaScript under different conditions. This benchmark specifically tests how efficiently the reduce function can process an array of 10,000 elements initialized to the value `1`. Each test case applies the reduce function in distinct scenarios, focusing on how the initial accumulator array is fashioned.

### Test Scenarios

1. **Reduce with empty array:**
   - **Definition:** `arr.reduce((acc, x) => { acc.push(x); return acc; }, []);`
   - **Description:** This test initializes the accumulator as an empty array (`[]`). The reduce function pushes each element of `arr` into this new empty array.
   - **Pros:** This approach starts with no elements, ensuring that the initial overhead of handling existing items in the accumulator is eliminated.
   - **Cons:** Depending on the JavaScript engine’s optimization, managing a growing array (with repeated `push` calls) could incur overhead since the array's size needs to be dynamically managed.

2. **Reduce with filled array:**
   - **Definition:** `arr.reduce((acc, x) => { acc.push(x); return acc; }, new Array(arr.length));`
   - **Description:** In this case, the accumulator is pre-initialized to a new array with the same length as `arr`, meaning it has reserved space for `10,000` elements.
   - **Pros:** By creating an array of the expected size up front, it might help reduce the need for resizing during the `push` operations, potentially leading to better performance in contexts where memory allocation is expensive.
   - **Cons:** If the final array is not significantly filled, the allocated but unused space could lead to wasted memory usage.

3. **Reduce with filled array with null:**
   - **Definition:** `arr.reduce((acc, x) => { acc.push(x); return acc; }, new Array(arr.length).fill(null));`
   - **Description:** This setup also initializes the accumulator with a new array of the same length, but it fills it with `null` values initially.
   - **Pros:** Similar to the previous test, it allocates a full array, but it also fills it with `null`. This may help in scenarios where the presence of initial values is necessary for some specific logic.
   - **Cons:** The time taken to fill the array with `null` may offset any performance gains from pre-allocation, making it less efficient than an empty accumulator.

### Benchmark Results

The benchmark results provide execution rates (executions per second) for each test case:

1. **Reduce with empty array:** 20,317.671875 executions per second
2. **Reduce with filled array with null:** 6,805.64990234375 executions per second
3. **Reduce with filled array:** 6,474.56982421875 executions per second

**Analysis of Results:**
- The **"Reduce with empty array"** demonstrated significantly higher performance compared to the other two cases, suggesting that starting with an empty accumulator can lead to better execution speed.
- The filled array scenarios resulted in lower execution rates, indicating a performance penalty when initializing with pre-sized arrays, especially when filled with `null`.

### Other Alternatives

When considering alternatives to the `reduce` method, other array methods could serve similar functionality:

- **`forEach()` method:** This method iterates over an array, allowing you to execute a function on each element. However, it doesn’t return a new array, making it unsuitable if accumulation is required.
  
- **`map()` method:** While primarily for transforming arrays, `map()` could be combined with `filter()` followed by `reduce()` for a more declarative approach, though it could have extra overhead due to creating intermediate arrays.

- **Traditional loops:** For scenarios requiring maximum performance, using a basic `for` or `while` loop might be the fastest option, as it avoids the overhead of method calls and can be highly optimized by the JavaScript engine.

In summary, the benchmark explores various strategies around the `reduce` function, highlighting trade-offs in performance based on how the initial accumulator is structured. Developers must consider their specific use cases and performance requirements when choosing between these conventions.

Related benchmarks:

Reduce array2 (version: 1)

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

Created: 28 days ago by: Guest

Jump to the latest result

Reduce with empty erray

Reduce with filled array

Reduce with filled array with null

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