Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
apply vs spread
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Apply vs Spread
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {control:[], apply:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Apply
window.top.tests.concat = window.top.tests.apply.push.apply(window.top.tests.apply, window.test); if (window.top.tests.apply.length > window.cutoff) { window.top.tests.apply = []; console.log('reset apply'); }
Spread
window.top.tests.spread.push(...window.test); 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
Apply
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/104.0.5112.114 YaBrowser/22.9.1.1145 Yowser/2.5 Safari/537.36
Browser/OS:
Yandex Browser 22 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=493690" width="100%" height="500px"></iframe>
Spread
655K/s
Apply
393K/s
View exact numbers
Test name
Executions per second
✓
Spread
655,090 Ops/sec
Apply
393,125 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the Benchmark Definition json and explain what is being tested. **What is being tested?** MeasureThat.net is testing two different ways to append elements to an array in JavaScript: 1. **Push method**: This involves using the `push` method on the array, which adds one or more elements to the end of the array. 2. **Spread operator (`...`)**: This involves using the spread operator to add multiple elements to the array. **Options compared** The benchmark is comparing two options: * `Apply`: This option uses a nested call to `push`, where the result of another `apply` call is passed as an argument to the final `push`. * `Spread`: This option uses the spread operator (`...`) to add multiple elements to the array. **Pros and Cons** Here are some pros and cons for each approach: * **Push method (Apply)**: + Pros: Simple, straightforward, and widely supported. + Cons: Can be slower than the spread operator due to the nested call. * **Spread operator (`...`) (Spread)**: + Pros: More concise, can be faster, and has better cache performance. + Cons: Requires a modern JavaScript engine that supports the spread operator. **Library/Language Features** There is no library being used in this benchmark. However, it's worth noting that the spread operator (`...`) was introduced in ECMAScript 2015 (ES6), so older browsers may not support it. **Special JS features/syntax** The benchmark uses a feature of JavaScript called `eval`, which allows code to be executed at runtime. This is used to create a new array by calling `new Array(10)`. The spread operator (`...`) also relies on this feature, as it needs to execute the expression that creates an array with multiple elements. **Other alternatives** If you're looking for alternative ways to append elements to an array, here are a few options: * **Using `push` multiple times**: Instead of using `apply`, you can simply use `push` multiple times: `window.top.tests.apply.push(window.test);`. * **Using `concat`**: You can also use the `concat` method to create a new array: `window.top.tests.concat = window.top.tests.push(window.test);`. Keep in mind that these alternatives may have different performance characteristics and may not be suitable for all use cases.
Related benchmarks
push() vs [...] for large arrays
Comments
Confirm delete:
Do you really want to delete benchmark?