Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
push() vs [...] for large arrays
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Push vs Spread
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {push:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Push
for (let element of window.test) { window.top.tests.push.push(element); } if (window.top.tests.push.length > window.cutoff) { window.top.tests.push = []; console.log('reset push'); }
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
Push
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Browser/OS:
Chrome 139 on Chrome OS 14541.0.0
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619836" width="100%" height="500px"></iframe>
Push
840K/s
Spread
47K/s
View exact numbers
Test name
Executions per second
✓
Push
840,177 Ops/sec
Spread
47,246 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain the benchmark and its test cases. **Benchmark Definition** The benchmark is defined in the provided JSON, which specifies that it compares two approaches for appending elements to a large array: `push()` vs `...` (spread syntax). The script preparation code sets up an empty array `window.top.tests.push` and another array `window.test`, filled with null values. The HTML preparation code is not needed in this case. **Test Cases** There are two test cases: 1. **Push**: This test case uses the `push()` method to append elements to the `window.top.tests.push` array. 2. **Spread**: This test case uses the spread syntax (`...`) to append elements to the `window.top.tests.spread` array. **Options Compared** The two options are being compared for their performance: * `push()`: a method-based approach that appends an element to the end of the array by calling the `push()` method on each individual element. * `...`: a spread-based approach that creates a new array with all elements from another array. **Pros and Cons** Here are some pros and cons of each approach: * **Push()**: + Pros: widely supported, efficient for small arrays. + Cons: can be slower for large arrays due to the repeated `push()` calls. * **...** (spread syntax): + Pros: generally faster than method-based approaches, especially for large arrays. + Cons: requires a recent JavaScript engine that supports it (not all older engines support it). **Other Considerations** It's worth noting that the spread syntax is often preferred in modern JavaScript due to its simplicity and efficiency. However, the `push()` method has been around for longer and may still be more familiar to some developers. If you're interested in understanding why the `...` approach might be faster, it's because array literals in JavaScript are optimized to use a binary search algorithm to find the correct position to insert an element, which can lead to fewer iterations than the repeated `push()` calls. However, this optimization only kicks in for large arrays, and smaller arrays may not show a significant difference. **Library Used** There is no external library used in these test cases, as they are using built-in JavaScript features. **Special JS Feature or Syntax** The spread syntax (`...`) was introduced in ECMAScript 2015 (ES6) and has since become a widely supported feature. However, older JavaScript engines may not support it, so it's essential to check the target browser's version when running these tests. Now that we've explored the benchmark and its test cases, you can see how MeasureThat.net provides a simple way to compare different approaches for common programming tasks in JavaScript!
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
Comments
Confirm delete:
Do you really want to delete benchmark?