Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array push vs spread when reducing over results
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Push vs Spread
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
Push
Array(10000).fill(1).reduce((acc, i) => {acc.push(i); return acc;}, []);
Spread
Array(10000).fill(1).reduce((acc, i) => {return [...acc, i]}, []);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Push
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=496052" width="100%" height="500px"></iframe>
Push
25K/s
Spread
29/s
View exact numbers
Test name
Executions per second
✓
Push
24,751 Ops/sec
Spread
29 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this benchmark. **Benchmark Definition:** The benchmark is comparing two approaches for reducing an array over its results: 1. `Array(10000).fill(1).reduce((acc, i) => {acc.push(i); return acc;}, [])`: This uses the traditional `.push()` method to add elements to the accumulator. 2. `Array(10000).fill(1).reduce((acc, i) => {return [...acc, i]}, [])`: This uses the new ES6 spread operator (`...`) to create a new array with the accumulated values. **Options Compared:** The benchmark is comparing two options: * `.push()` method (traditional approach) * Spread operator (`...`) (new ES6 approach) **Pros and Cons of Each Approach:** 1. **.push() Method:** * Pros: + Widely supported across browsers and JavaScript engines. + Generally faster, as it's a single function call. * Cons: + Can lead to slower performance in certain scenarios due to the need to update the array length. 2. **Spread Operator (`...`):** * Pros: + More concise and expressive code. + Can be faster for large datasets, as it avoids updating the array length. * Cons: + May not work correctly in older browsers or JavaScript engines that don't support spread operators. **Library:** None of the test cases use a specific library. The benchmark is focusing solely on the JavaScript built-in methods and syntax. **Special JS Feature or Syntax:** The test case uses the new ES6 spread operator (`...`). This feature was introduced in ECMAScript 2015 (ES6) and allows for creating a new array with elements from an existing array. **Other Considerations:** * The benchmark is running on a desktop platform using Chrome 120, which suggests that it's targeting modern browsers and JavaScript engines. * The test case uses a large dataset of 10,000 elements, which may impact the results. Larger datasets can lead to more significant differences in performance between approaches. **Alternatives:** If you were to implement this benchmark yourself, you could consider using other JavaScript methods or libraries for reducing arrays over its results, such as: * `Array.prototype.concat()` * `Lodash` library (e.g., `lodash.forEach`) * `Underscore.js` library (e.g., `_reduceRight`) Keep in mind that the performance differences between these alternatives may vary depending on the specific use case and browser/JavaScript engine being targeted.
Related benchmarks
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?