Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) for large arrays of arrays
(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:
Guest
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(null); window.arrays = (new Array(10)).fill(null).map(_ => window.test); window.cutoff = 5000;
Tests:
Control (for push)
window.top.tests.control = window.arrays.reduce((acc, arr) => { acc.push(...arr); return acc; }, []); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
window.top.tests.concat = window.arrays.reduce((acc, arr) => acc.concat(arr), []); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread = window.arrays.reduce((acc, arr) => [...acc, ...arr], []); 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 world of JavaScript benchmarks on MeasureThat.net. The provided JSON represents a benchmark test that compares three different approaches for appending to large arrays: `push()`, `concat()`, and spread operator (`...`). The test is designed to measure the performance differences between these methods. **Test Cases** There are three individual test cases: 1. **Control (for push)**: This test case uses the `Array.prototype.push()` method to append elements to a large array. * Pros: Widely supported, simple implementation. * Cons: Can be slower for very large arrays due to the overhead of calling `push()` repeatedly. 2. **Concat**: This test case uses the `Array.prototype.concat()` method to concatenate multiple arrays into one. * Pros: Efficient for appending large arrays, as it avoids creating intermediate arrays. * Cons: May require additional memory allocations, which can lead to performance issues. 3. **Spread**: This test case uses the spread operator (`...`) to append elements to a new array. * Pros: Fast and efficient, as it creates a new array without modifying the original one. * Cons: Requires modern JavaScript versions (ECMAScript 2018+), and may not be supported in older browsers. **Library Usage** None of the test cases use external libraries. However, the benchmark uses `Array.prototype.reduce()` to perform the concatenation or appending operations, which is a built-in method in JavaScript. **Special JS Features** The spread operator (`...`) used in the **Spread** test case is a modern JavaScript feature introduced in ECMAScript 2018+. While it's widely supported in modern browsers and Node.js, older browsers may not support it. If you need to support older browsers, you might want to use a polyfill or an alternative implementation. **Other Alternatives** If you're looking for alternatives to these methods, here are some options: * For appending elements to an array: `Array.prototype.push()` is still a popular choice. * For concatenating arrays: You can also use `Array.prototype.concat()` or create a new array using the spread operator (`...`) and then assigning it back to the original array. * For creating a new array by spreading existing arrays: The spread operator (`...`) is a convenient way to do this, but you can also use `Array.prototype.concat()` with multiple arguments or create a new array using `Object.assign()`. In conclusion, the choice of method depends on your specific requirements, such as performance, memory usage, and browser support. The benchmark results provided by MeasureThat.net will help you compare the performance differences between these approaches for large arrays of arrays.
Related benchmarks:
Concat vs push(...) vs spread for large arrays
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?