Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) for large arrays random
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Spread
Created:
5 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(Math.random()); 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'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Control (for push)
Concat
Spread
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 dive into the explanation of what is tested on the provided JSON. **Benchmark Definition** The benchmark measures the performance of three different approaches to append elements to an array: 1. `push()`: Using the `push()` method to add elements to the end of the array. 2. `concat()`: Using the `concat()` method to concatenate a new array to the existing one. 3. `Spread Operator (`: Using the spread operator (`...)` to append elements to the array. **Options Compared** The benchmark compares the performance of these three approaches for large arrays, specifically 10-element arrays generated with `Math.random()`. The results are compared in terms of execution time per second. **Pros and Cons** * `push()`: This is a built-in method that is generally fast and efficient. However, it may require additional iterations to check the length of the array and reset it if necessary. * `concat()`: This method creates a new array by concatenating the existing one with the new elements. While it's simple to use, it can be slower than `push()` due to the overhead of creating a new array. * `Spread Operator (`: This is a relatively new feature that was introduced in ECMAScript 2015 (ES6). It uses the spread operator (`...`) to expand the array into individual elements. While it's concise and expressive, its performance may vary depending on the browser support. **Library Used** None of the test cases use any external libraries beyond the built-in JavaScript methods and the `Math.random()` function. **Special JS Feature/Syntax** The benchmark uses the spread operator (`...`) which is a relatively new feature introduced in ECMAScript 2015 (ES6). This feature allows for concise array expansion, but its performance may vary depending on browser support. In this case, it appears that Chrome 87 supports the spread operator. **Benchmark Preparation Code** The benchmark preparation code sets up an object `window.top.tests` with three arrays: `control`, `concat`, and `spread`. It also generates a random 10-element array using `Math.random()` and defines a cutoff value of 5000. The `test` function is used to execute the benchmark. **Other Alternatives** Alternative approaches to appending elements to an array could include: * Using `Array.prototype.unshift()`: This method adds elements to the beginning of the array, which may have different performance characteristics compared to `push()`. * Using a custom implementation with a loop: This approach would require manual iteration and indexing, but might provide more control over the benchmark. However, these alternatives are not tested in this specific benchmark.
Related benchmarks:
Concat vs push(...) vs spread for large arrays
Concat vs push(...) for large arrays using spread in test 2
Concat vs push(...) vs push.apply for large arrays
Concat vs push(...) for large arrays with PrototypePushApply
Comments
Confirm delete:
Do you really want to delete benchmark?