Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
In loop, push(...) vs spread
(version: 0)
Comparing the various ways to append to a large array during a loop
Comparing performance of:
Control (for push) vs Spread
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Spread
window.top.tests.spread.push(...window.test); store = [] for (let element of window.test) [...store, element] if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Control (for push)
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
Browser/OS:
Firefox 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=614858" width="100%" height="500px"></iframe>
Spread
2.2M/s
Control (for push)
860K/s
View exact numbers
Test name
Executions per second
✓
Spread
2,183,615 Ops/sec
Control (for push)
859,732 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Definition** The provided JSON represents a benchmark that compares three different approaches to append elements to an array during a loop: 1. **Control (for push)**: Using the `push` method to add elements to the end of the array. 2. **Concat**: Using the spread operator (`...`) with the `concat` method to create a new array and then push elements into it. 3. **Spread**: Using the spread operator (`...`) directly on the array. **Options Compared** The benchmark tests the performance of each approach under different conditions: * Control (for push): This is the most straightforward way to append elements to an array using the `push` method. * Concat: This approach uses the spread operator to create a new array and then pushes elements into it. It's less efficient than the control approach because it creates an additional array object. * Spread: This approach uses the spread operator directly on the existing array, which is more efficient than the concatenation approach but requires a supported JavaScript engine. **Pros and Cons of Each Approach** Here are some pros and cons for each approach: * Control (for push): * Pros: * Simple to implement * Efficient * Cons: * Can be slower due to the push operation * Concat: * Pros: * Easy to understand * Cons: * Creates an additional array object, which can be inefficient * Spread: * Pros: * More efficient than concatenation because it avoids creating a new array object * Cons: * Requires a supported JavaScript engine (modern browsers and Node.js) * May have unexpected behavior in older browsers or environments **Libraries Used** The benchmark uses no external libraries, only the built-in JavaScript features. **Special JS Features/Syntax** There are no special JavaScript features or syntax used in this benchmark. The focus is on comparing different approaches to append elements to an array using standard JavaScript methods. **Alternative Approaches** Other alternatives for appending elements to an array during a loop might include: * **Using `Array.prototype.splice()`**: This method can be more efficient than push because it modifies the original array in place. * **Using `Array.prototype.set()`**: This method is not widely supported and may have performance implications. * **Using a custom implementation with a specific data structure**: Depending on the specific requirements, using a custom data structure or algorithm might provide better performance. Keep in mind that these alternatives are not necessarily more efficient than the approaches tested in this benchmark. The best approach depends on the specific use case and requirements. I hope this explanation helps you understand the JavaScript microbenchmark on MeasureThat.net!
Related benchmarks
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs push.apply for large arrays
Concat vs push(...) for large arrays with PrototypePushApply
Concat vs push vs spread for large arrays 2
Comments
Confirm delete:
Do you really want to delete benchmark?