Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
reduce concat vs reduce spread performance
(version: 1)
Comparing performance of:
reduce with spread vs reduce with concat
Created:
one year ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
reduce with spread
reduce with concat
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=613895" width="100%" height="500px"></iframe>
reduce with concat
11/s
reduce with spread
2/s
View exact numbers
Test name
Executions per second
✓
reduce with concat
11 Ops/sec
reduce with spread
2 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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
Object set vs new spread when reducing over results
Comments
Confirm delete:
Do you really want to delete benchmark?