Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) vs flat 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 vs Flat
Created:
6 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[], flat: []}; window.test = (new Array(10)).fill(null); window.arrays = (new Array(10)).fill(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'); }
Flat
window.top.tests.flat = window.arrays.flat(); if (window.top.tests.flat.length > window.cutoff) { window.top.tests.flat = []; console.log('reset flat'); }
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
Flat
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 14_8_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 14 on iOS 14.8.1
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627187" width="100%" height="500px"></iframe>
Flat
1.0M/s
Concat
576K/s
Control (for push)
478K/s
Spread
370K/s
View exact numbers
Test name
Executions per second
✓
Flat
1,000,634 Ops/sec
Concat
576,090 Ops/sec
Control (for push)
478,383 Ops/sec
Spread
370,294 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** MeasureThat.net is a platform for comparing the performance of different JavaScript approaches to manipulate arrays. The provided benchmark defines four test cases: `Control (for push)`, `Concat`, `Spread`, and `Flat`. These tests measure how fast each approach can append elements to an array. **Test Cases and Approaches** 1. **Control (for push)**: * Approach: Using the `push()` method, which appends one or more elements to the end of an array. * Example Benchmark Definition: `window.top.tests.control = window.arrays.reduce((acc, arr) => {\r\n acc.push(...arr);\r\n return acc;\r\n}, []);` 2. **Concat**: * Approach: Using the `concat()` method, which returns a new array that is the result of concatenating an array with another array or value. * Example Benchmark Definition: `window.top.tests.concat = window.arrays.reduce((acc, arr) => acc.concat(arr), []);` 3. **Spread**: * Approach: Using the spread operator (`...`) to expand an array into its individual elements and then reassigning them to a new array. * Example Benchmark Definition: `window.top.tests.spread = window.arrays.reduce((acc, arr) => [...acc, ...arr], []);` 4. **Flat**: * Approach: Using the `flat()` method, which returns an array with all sub-array elements concatenated into it recursively up to a specified depth. * Example Benchmark Definition: `window.top.tests.flat = window.arrays.flat();` **Pros and Cons** Each approach has its strengths and weaknesses: * **Control (for push)**: + Pros: Simple and efficient, as it only requires pushing elements onto the array. + Cons: Can be slower for large arrays due to the overhead of repeatedly calling `push()`. * **Concat**: + Pros: Creates a new array, which can avoid modifying the original array. + Cons: Requires creating an intermediate array and copying its contents, which can be slow for large arrays. * **Spread**: + Pros: Avoids modifying the original array and uses the spread operator, which is efficient. + Cons: Can be slower than `push()` due to the overhead of expanding the array using the spread operator. * **Flat**: + Pros: Recursively flattens the array, avoiding the need for explicit looping or concatenation. + Cons: Can be slower due to the recursive nature of `flat()`. **Library and Special JS Features** The benchmark uses the following libraries: * No external libraries are used in this benchmark. * The `reduce()` method is used, which is a built-in JavaScript array method that applies a function to each element in an array. No special JS features are mentioned in the benchmark definition.
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?