Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
array spreads
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Spread vs Spread 2
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[], spread2:[]}; 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'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread.push(...window.test); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Spread 2
window.top.tests.spread2 = [...window.test]; if (window.top.tests.spread2.length > window.cutoff) { window.top.tests.spread2 = []; console.log('reset spread2'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Control (for push)
Concat
Spread
Spread 2
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what's being tested, the options compared, pros and cons of each approach, library usage, special JavaScript features or syntax, and other considerations. **What's being tested:** The benchmark is comparing four different ways to append to a large array: 1. `Control (for push)`: Using a traditional `push` method. 2. `Concat`: Using the `concat` method. 3. `Spread`: Using the spread operator (`...`) to append elements to an array. 4. `Spread 2`: Using destructuring assignment (`[...]`) to create a new array. **Options compared:** * **Control (for push)**: Traditional `push` method, which is likely the most straightforward and widely supported approach. * **Concat**: Using `concat` method, which can be slower than `push` due to the overhead of creating a new array. * **Spread**: Using spread operator (`...`) to append elements to an array. This approach can be faster because it avoids creating a new array. * **Spread 2 (Destructuring)**: Using destructuring assignment (`[...]`) to create a new array, which is similar to the `spread` method. **Pros and Cons of each approach:** * **Control (for push)**: + Pros: Simple, widely supported, and fast. + Cons: May be slower than other approaches due to the overhead of `push`. * **Concat**: Pros: Works well with existing code that uses `concat`. Cons: Can be slower than `push` or spread methods. * **Spread**: Pros: Fast, concise, and modern. Cons: May not work as expected in older browsers or environments without support for the spread operator. * **Spread 2 (Destructuring)**: Pros: Similar performance to `spread`, but with a more explicit and readable syntax. Cons: Less widely supported than `spread`. **Library usage:** None of the options use external libraries. **Special JavaScript features or syntax:** * The benchmark uses the spread operator (`...`) in the `Spread` option, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This means that this benchmark may not work in older browsers or environments without support for ES6. * The `Destructuring` assignment (`[...]`) used in the `Spread 2` option is also an ES6 feature. **Other considerations:** * Browser support: The benchmark results are specific to Chrome 100 on a Mac OS X 10.15.7 desktop environment. Other browsers or environments may have different performance characteristics. * Test setup: The test creates a large array of 10 elements filled with `null` values, and then appends more elements using each of the four options. * Benchmark results: The benchmark provides raw execution counts per second for each option, which can be used to compare performance. **Alternatives:** If you want to explore other approaches or alternatives, here are a few options: * Using `Array.prototype.push.apply()` instead of the spread operator (`...`). * Implementing your own custom array appending logic. * Comparing different JavaScript engines (e.g., V8, SpiderMonkey) for their performance characteristics. Keep in mind that these alternatives may not be relevant to the specific benchmark or use case, and you should consider factors like maintainability, readability, and compatibility when choosing an approach.
Related benchmarks:
array spreads fixed
Concat vs push(...) vs. spread for large arrays
Concat vs push(...) for large arrays using spread in test 2
Concat vs push vs spread for large arrays 2
Comments
Confirm delete:
Do you really want to delete benchmark?