Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
A.push(B) V.S. [ ...A, B ]
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Spread
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], 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
for (let element of window.test) window.top.tests.spread = [ ...window.top.tests.spread, 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:
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 world of JavaScript microbenchmarks! **What is being tested?** The provided benchmark tests two approaches to append elements to a large array: 1. **Control (for push)**: This approach uses the `push()` method to add elements to the end of the array. 2. **Spread**: This approach uses the spread operator (`...`) to create a new array with the existing elements and the new element appended. **Options compared** The benchmark compares the performance of these two approaches, specifically: * The number of executions per second (ExecutionsPerSecond) for each browser and device platform. **Pros and cons of each approach** 1. **Control (for push)**: * Pros: This is a more traditional way of appending elements to an array, and it's likely to be familiar to many developers. * Cons: The `push()` method can lead to performance issues if the array is very large, as it involves shifting all existing elements down to make room for the new one. 2. **Spread**: * Pros: This approach creates a new array with the desired element appended, which can be more efficient than using `push()`. * Cons: The spread operator is a relatively recent addition to JavaScript (introduced in ECMAScript 2018), and it may not be supported by older browsers or versions of Node.js. **Other considerations** * **Array methods**: Both approaches assume that the array being appended to is an instance of `Array`. If this assumption is not met, unexpected behavior may occur. * **Browser support**: The benchmark results only provide data for Safari 15 on Mac OS X 10.15.7. Other browsers or versions may exhibit different performance characteristics. **Library/Functionality** The spread operator (`...`) uses the `Array.prototype.push()` method under the hood, but it also involves creating a new array with the desired element appended. This is why the `spread` option performs better than the `control` option in this benchmark. **Special JS feature/syntax** There is no special JavaScript feature or syntax being tested in this benchmark. It's purely about comparing two different approaches to appending elements to an array. **Alternatives** If you want to test other approaches to appending elements to an array, some alternatives could include: * Using `concat()`, which also creates a new array with the desired element appended. * Using a for loop with indexing (e.g., `arr[i++] = element;`), which can be more efficient than using `push()` but may be less readable. * Using a library like Lodash, which provides utility functions for working with arrays. Overall, this benchmark is a useful tool for understanding the performance implications of different approaches to appending elements to an array in JavaScript.
Related benchmarks:
Concat vs push(...) vs spread for large arrays
In loop, push(...) vs spread
Concat vs push(...) for large arrays using spread in test 2
Concat vs push(...) vs push.apply for large arrays
push() vs [...] for large arrays
Comments
Confirm delete:
Do you really want to delete benchmark?