Benchmark: reduce concat vs reduce spread performance

Script Preparation code:

var arr = Array.from({length:10000}, (v, i) => i);

Tests:

reduce with spread
arr.reduce((a, o) => [...a, ...[o*2, o*4]], []);
reduce with concat
arr.reduce((a, o) => a.concat([o*2, o*4]), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
reduce with concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.5

View result in a separate tab

Test name	Executions per second
reduce with spread	2.4 Ops/sec
reduce with concat	10.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):

LLMs can make mistakes. Check important info.

The provided benchmark compares two different approaches for reducing an array in JavaScript: one using the spread operator and the other using the `concat` method. The goal is to assess the performance of each approach in terms of how many times they can be executed in one second.

### Compare Options

1. **Reduce with Spread**:
   - **Benchmark Definition**: `arr.reduce((a, o) => [...a, ...[o*2, o*4]], []);`
   - This approach utilizes the spread operator (`...`) to create a new array that combines the accumulated array (`a`) and a new array created from the current element (`o`) multiplied by factors of 2 and 4.

2. **Reduce with Concat**:
   - **Benchmark Definition**: `arr.reduce((a, o) => a.concat([o*2, o*4]), []);`
   - In this method, the `concat` function is used to append new elements generated from the current element (`o`) to the accumulated array (`a`).

### Pros and Cons

#### Reduce with Spread:
- **Pros**:
  - Syntax is often considered cleaner and more modern.
  - The spread operator can be more intuitive for developers familiar with modern JavaScript syntax.
- **Cons**:
  - Can be less performant due to the creation of multiple intermediate arrays; each use of `[...]` generates a new array.
  - Generally leads to more memory consumption since a new array must be created at each step.

#### Reduce with Concat:
- **Pros**:
  - Typically more performant in scenarios involving large arrays, as `concat` modifies the existing array rather than creating multiple intermediate arrays.
  - Results in fewer allocations compared to using the spread operator, particularly in older JavaScript engines.
- **Cons**:
  - The syntax might be considered more verbose and less elegant than using the spread operator.

### Benchmark Results
The benchmark results show that the `reduce with concat` approach achieves approximately **10.50 executions per second**, which is significantly more efficient than `reduce with spread`, which achieves about **2.37 executions per second**. This confirms the general expectation that the `concat` method performs better in this context.

### Other Considerations
In a more extensive application, choosing between these methods may depend on the context in which you're working. If performance is critical—particularly with large datasets—it may be advisable to use `concat`. However, for smaller data or in environments where readability is prioritized, the spread operator might be preferred.

### Alternatives
Other alternatives to reduce an array and collect items would be:

1. **For Loop**: Using a traditional `for` loop can sometimes outperform both methods, especially for larger datasets. It allows for the most control and efficiency.
2. **Map and Filter**:  Depending on what the goal is, sometimes you could use combinations of `map` and `filter` to achieve similar results, which might be more readable and easier to understand for some developers.
3. **Array.prototype.push() with Initial Value**: Instead of building new arrays, you could utilize `Array.prototype.push()` along with some conditional logic to keep a single accumulated array as you iterate.

In conclusion, this benchmark explores the trade-offs between two common techniques for array reduction, revealing both performance implications and stylistic preferences for software engineers in JavaScript development.

Related benchmarks:

reduce concat vs reduce spread performance (version: 1)

Comparing performance of: reduce with spread vs reduce with concat

Created: 9 months ago by: Guest

Jump to the latest result

reduce with spread

reduce with concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):